/* ─── AL Service templates — shared by service-hub.html and service-detail.html ───
   Everything else on these two pages comes from base.css, page.css and the homepage
   section sheets. Only genuinely new components live here. */

/* ── Hero support ── */
.al-phero__grid > * { min-width: 0; }
.al-phero__note { margin: 22px 0 0; font-size: 14.5px; color: var(--ink-3); }
.al-phero__note a { color: var(--red); font-weight: 700; text-underline-offset: 3px; }

/* ── "How the call goes" — numbered white cards, no tinted band ── */
.al-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.al-flow > * { min-width: 0; }
.al-flow__item {
	background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-1);
	padding: 28px 26px 30px;
}
.al-flow__item i {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	background: var(--bone); border: 1px solid var(--line); margin-bottom: 18px;
	font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--ink);
	font-style: normal;
}
.al-flow__item h3 { font-size: 18.5px; margin: 0 0 9px; }
.al-flow__item p { font-size: 15.5px; color: var(--ink-3); margin: 0; }

/* ── Narrow column for a silo-scoped FAQ (no dark aside here) ── */
.al-faqnarrow { max-width: 860px; margin-inline: auto; }
.al-faqnarrow .al-faq__list { display: grid; gap: 12px; }

/* ── Light call panel for the sticky aside ──
   .al-combo__phone is written for a dark ground, so the aside gets its own light version. */
.al-callpanel__phone { display: flex; align-items: center; gap: 14px; text-decoration: none; margin-bottom: 18px; }
.al-callpanel__phone i {
	width: 48px; height: 48px; border-radius: 50%; background: var(--red); flex: none;
	display: grid; place-items: center; box-shadow: 0 10px 24px rgba(227,73,58,.3);
	transition: transform .2s ease;
}
.al-callpanel__phone:hover i { transform: scale(1.06); }
.al-callpanel__phone svg { width: 21px; height: 21px; stroke: #fff; }
.al-callpanel__phone small { display: block; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.al-callpanel__phone b { font-family: var(--font-display); font-size: 24px; color: var(--ink); letter-spacing: -.02em; }
.al-callpanel .al-btn { width: 100%; }
.al-callpanel__note { margin: 16px 0 0; font-size: 13.5px; color: var(--ink-3); }

.al-aside h4 {
	font-family: var(--font-display); font-size: 12.5px; font-weight: 800;
	letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
	margin: 0 0 6px;
}

/* ── Prose lead-in ── */
.al-prose__lead { font-size: 19.5px; color: var(--ink); line-height: 1.55; }

/* ── Focus rings for the new interactive bits ── */
.al-callpanel__phone:focus-visible, .al-flow__item a:focus-visible {
	outline: 3px solid var(--red); outline-offset: 3px; border-radius: var(--r);
}

/* ── Responsive — breakpoints match page.css ── */
@media (max-width: 1080px) {
	.al-flow { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
	.al-phero__note { margin-top: 18px; }
}
@media (max-width: 720px) {
	.al-flow { grid-template-columns: 1fr; gap: 16px; }
	.al-flow__item { padding: 24px 22px 26px; }
	.al-callpanel__phone b { font-size: 22px; }
}

/* Closing combo: phone + one action on the right, so the column has real height */
.al-combo__act { display: grid; gap: 18px; justify-items: start; }
.al-combo__act .al-btn { width: 100%; }
.al-combo__note { font-size: 13.5px; line-height: 1.6; color: #8f8f99; }
@media (max-width: 900px) { .al-combo__act { gap: 16px; } }