/* Service pages (one template). Mobile values first; desktop from the service design files. */

/* Same structure as About / Contact: content between the header edges (logo / Get the App),
   64px section padding on mobile, 96px on desktop, no banded backgrounds. */
.page-service .pg-section { padding: 64px var(--gutter); }
.page-service .pg-section--alt { background: none; border: 0; }
@media (min-width: 1024px) {
  .page-service .pg-section { padding: 96px max(32px, calc(222 * var(--u))) 96px max(32px, calc(224 * var(--u))); }
  .page-service .pg-wrap { max-width: none; }
}

.svc-title { font-size: clamp(27px, 3.2vw, 44px); line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; }
@media (min-width: 1024px) { .svc-title { line-height: 1.15; letter-spacing: -0.015em; } }

/* ───────────── Hero ───────────── */
.svc-hero { position: relative; padding: 40px var(--gutter) 64px; overflow: hidden; }
.svc-hero__glow {
  position: absolute; left: 50%; top: 62%; width: 560px; height: 520px; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 45% 42% at 50% 50%, rgba(var(--primary-rgb), 0.16), rgba(var(--primary-rgb), 0) 72%); pointer-events: none;
}
.svc-hero__grid { position: relative; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.svc-hero__text { display: flex; flex-direction: column; align-items: flex-start; }
.svc-pill {
  display: flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--divider); background: transparent;
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary);
}
.svc-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }
.svc-hero h1 { margin-top: 18px; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.12; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
.svc-hero p { margin-top: 16px; max-width: 520px; font-size: 15px; line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
.svc-hero__media { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.svc-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos-m, 50% 50%); }
.js .svc-hero__media[data-hero-in] { transform: scale(0.97); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
@media (min-width: 768px) {
  .svc-hero { padding: clamp(64px, 8vw, 112px) 24px; }
  .svc-hero__glow { left: 62%; top: 50%; width: 900px; height: 700px; background: radial-gradient(ellipse 45% 45% at 50% 50%, rgba(var(--primary-rgb), 0.14), rgba(var(--primary-rgb), 0) 70%); }
  .svc-pill { min-height: 28px; padding: 0 11px; font-size: 10.5px; }
  .svc-hero h1 { margin-top: 24px; line-height: 1.1; }
  .svc-hero p { margin-top: 24px; font-size: 18px; color: var(--text-secondary); }
  .svc-hero__media { border-radius: 24px; }
}
@media (min-width: 1024px) {
  .svc-hero { padding-inline: max(32px, calc(224 * var(--u))) max(32px, calc(222 * var(--u))); }
  .svc-hero__grid { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 80px); }
  .svc-hero__media img { object-position: 50% 50%; }
}

/* ───────────── Card grid ───────────── */
.svc-cards { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 768px) { .svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .svc-cards { margin-top: 56px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.svc-card {
  padding: 20px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px; transition: border-color 0.25s ease;
}
.svc-card:hover { border-color: rgba(var(--primary-rgb), 0.35); }
.svc-card__icon { width: 30px; height: 30px; color: var(--lime); }
.svc-card h3 { margin-top: 6px; font-size: 16px; line-height: 1.3; font-weight: 600; }
.svc-card p { font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
@media (min-width: 1024px) {
  .svc-card { padding: 32px; border-radius: 24px; gap: 14px; }
  .svc-card h3 { margin-top: 10px; font-size: 19px; }
  .svc-card p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
}

/* ───────────── Steps (timeline from pages.css) ───────────── */
.svc-steps { margin-top: 36px; }
.svc-steps .ms-item { padding: 0 0 32px 32px; }
.svc-steps .ms-item:last-child { padding-bottom: 0; }
.svc-steps .ms-year { font-size: 24px; }
.svc-steps .ms-item h3 { font-size: 16px; font-weight: 600; }
.svc-steps .ms-item p { margin-top: 4px; color: var(--text-secondary); }
@media (min-width: 1024px) {
  .svc-steps { margin-top: 72px; }
  .svc-steps .ms-list { gap: 48px 40px; }
  .svc-steps .ms-item, .svc-steps .ms-item:last-child { padding: 34px 0 0; }
  .svc-steps .ms-year { font-size: 28px; }
  .svc-steps .ms-item h3 { margin-top: 12px; font-size: 17px; }
  .svc-steps .ms-item p { margin-top: 6px; color: var(--text-secondary); }
}

/* ───────────── Standards + side cards ───────────── */
.svc-std { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.svc-std__main { display: flex; flex-direction: column; gap: 12px; }
.svc-std__main .svc-title { text-wrap: balance; }
.svc-checks { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--divider); }
.svc-checks li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--divider); }
.svc-checks svg { width: 20px; height: 20px; flex: none; color: var(--lime); margin-top: 1px; }
.svc-checks div { display: flex; flex-direction: column; gap: 3px; }
.svc-checks__title { font-size: 15px; font-weight: 600; }
.svc-checks__text { font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.svc-std__side { display: flex; flex-direction: column; gap: 12px; }
.svc-side-card {
  padding: 24px 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
}
.svc-side-card .pg-eyebrow { font-size: 11px; }
.svc-side-card h3 { font-size: 19px; line-height: 1.3; font-weight: 600; }
.svc-side-card p { font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.svc-side-card__link { margin-top: 4px; min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--lime); text-decoration: none; }
.svc-side-card__link:hover { color: var(--lime-hover); text-decoration: underline; }
@media (min-width: 1024px) {
  .svc-std { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(40px, 5vw, 80px); }
  .svc-std__main { gap: 16px; }
  .svc-checks { margin-top: 24px; }
  .svc-checks li { gap: 16px; padding: 18px 0; }
  .svc-checks div { gap: 4px; }
  .svc-checks__title { font-size: 16px; }
  .svc-checks__text { font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
  .svc-std__side { gap: 20px; }
  .svc-side-card { padding: 36px; border-radius: 24px; gap: 14px; }
  .svc-side-card .pg-eyebrow { font-size: 12px; }
  .svc-side-card h3 { font-size: 24px; }
  .svc-side-card p { font-size: 15px; line-height: 1.65; color: var(--text-secondary); }
  .svc-side-card__link { margin-top: 6px; min-height: 0; font-size: 15px; }
}

/* ───────────── FAQ (card style) ───────────── */
.svc-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.faq-list--card { gap: 10px; }
.faq-list--card .faq-item { border: 1px solid var(--divider); border-radius: 14px; background: var(--bg-paper); padding: 16px; transition: border-color 0.2s ease; }
.faq-list--card .faq-item:hover { border-color: rgba(var(--primary-rgb), 0.3); }
.faq-list--card .faq-item__q { font-size: 15px; line-height: 1.55; }
.faq-list--card .faq-item__a p { padding-top: 8px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
@media (min-width: 1024px) {
  .svc-faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px clamp(40px, 5vw, 80px); }
  .faq-list--card { gap: 12px; }
  .faq-list--card .faq-item { border-radius: 16px; background: var(--bg-paper); padding: 20px 22px; }
  .faq-list--card .faq-item__q { gap: 18px; font-size: 16px; line-height: 1.5; font-weight: 600; }
  .faq-list--card .faq-item__icon { width: 16px; height: 16px; margin-top: 4px; color: var(--lime); stroke-width: 1.8; }
  .faq-list--card .faq-item__a { padding-left: 34px; }
  .faq-list--card .faq-item__a p { padding-top: 10px; font-size: 15px; line-height: 1.65; color: var(--text-secondary); }
}

/* ───────────── Closing CTA ───────────── */
.svc-cta-wrap { padding: 8px var(--gutter) 64px; }
.lime-cta--svc { padding: 36px 22px; gap: 16px; }
.lime-cta--svc h2 { font-size: clamp(28px, 3.8vw, 52px); line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; }
.lime-cta--svc p { max-width: 460px; font-size: 14px; line-height: 1.6; font-weight: 500; color: var(--on-lime-btn); }
.lime-cta--svc .lime-cta__btns { margin-top: 6px; }
@media (min-width: 768px) {
  .svc-cta-wrap { padding: 0 24px 96px; }
  .lime-cta--svc { padding: clamp(48px, 6vw, 80px) clamp(28px, 5vw, 72px); gap: 24px; }
  .lime-cta--svc h2 { line-height: 1.08; }
  .lime-cta--svc p { font-size: 17px; }
  .lime-cta--svc .lime-cta__btns { margin-top: 0; }
  .lime-cta--svc .lime-cta__solid { min-height: 52px; }
}
@media (min-width: 1024px) {
  .svc-cta-wrap { padding-inline: max(32px, calc(224 * var(--u))) max(32px, calc(222 * var(--u))); }
  .lime-cta--svc { max-width: none; }
}