/* Page styles for /services/retail-church-gym-cleaning/, /services/apartment-hoa-common-area-cleaning/ and
   /services/commercial-deep-cleaning/ (builder: svc-c). Small additions on top of site.css; design tokens only.
   Candidates to promote into site.css later: .glance-card (same idea as services-a .svc-glance), .hero-kicker, .space-grid, .factors, .commit-grid. */

/* ---- Typographic hero: text on the left; on the right an "at a glance" card inside the broken circle ---- */
.page-hero--type .container { align-items: center; }
.page-hero--type .page-hero-text { align-content: start; }
.hero-aside { position: relative; display: grid; place-items: center; padding: clamp(2.5rem, 1rem + 4vw, 4.5rem) 0; }
.hero-aside > .gt-arc {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(112%, 36rem); height: auto; aspect-ratio: 1;
  color: var(--gt-ink); --arc-w: 0.3; pointer-events: none;
}
.glance-card {
  position: relative; display: grid; gap: var(--space-4); width: min(100%, 25rem); padding: var(--space-6);
  background: var(--gt-white); border: var(--border-hair); border-radius: var(--radius-l); box-shadow: var(--shadow-2);
}
.glance-list { list-style: none; padding: 0; margin: 0; display: grid; }
.glance-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: center; padding-block: var(--space-3); border-top: var(--border-hair); }
.glance-list li:first-child { border-top: 0; padding-top: 0; }
.glance-list li { align-items: start; }
.glance-list li > .icon { width: 22px; height: 22px; margin-top: 2px; color: var(--color-accent); }
.glance-list strong { display: block; font-weight: 500; font-size: var(--step--1); }
.glance-list span { display: block; font-size: var(--step--1); color: var(--color-text-muted); line-height: 1.45; }
/* Phones and tablets: the section eyebrows carry the same facts, so the hero stays short */
@media (max-width: 859px) { .hero-aside { display: none; } }
/* Icon ring(s) beside the hero eyebrow */
.hero-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.hero-kicker .icon-ring { width: 48px; height: 48px; }
.hero-kicker .icon-ring .icon { width: 22px; height: 22px; }
.hero-kicker-rings { display: flex; gap: 2px; }
.page-hero .jump { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.jump ul { list-style: none; padding: 0; margin: 0; }

/* Split hero photo (4:3, rounded) with the broken circle tucked behind its top corner */
.hero-media { position: relative; isolation: isolate; align-self: center; }
.hero-media .media-round { position: relative; z-index: 1; }
.hero-media .media-round > img { box-shadow: var(--shadow-2); }
.hero-media > .gt-arc {
  position: absolute; z-index: 0; width: 116%; height: auto; aspect-ratio: 1; left: -8%; top: -27.3%;
  color: var(--gt-ink); --arc-w: 0.28; pointer-events: none;
}
@media (max-width: 859px) { .hero-media { max-width: 34rem; margin-block: var(--space-7) var(--space-5); } }

/* ---- One "mini-page" per kind of space: a short intro that stays in view beside the scope ---- */
.space-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 4vw, 5.5rem); align-items: start; }
.space-intro { display: grid; gap: var(--space-4); justify-items: start; }
.space-intro .lead { max-width: 30ch; }
.space-intro .btn-row { margin-top: var(--space-2); }
@media (min-width: 960px) and (min-height: 760px) {
  .space-intro { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}
@media (max-width: 959px) { .space-grid { grid-template-columns: 1fr; } .space-intro .lead { max-width: 40ch; } }
.space-body { display: grid; gap: clamp(2.75rem, 2rem + 2.5vw, 4rem); min-width: 0; }
.space-block { display: grid; gap: var(--space-4); min-width: 0; }
.space-block > h3 { font-size: var(--step-3); }
.space-block .faq { margin-top: var(--space-2); }

/* Tab panels: a one-line lead above the list */
.tab-panel > * + * { margin-top: var(--space-3); }
.panel-lead { font-size: var(--step--1); color: var(--color-text-subtle); letter-spacing: 0.02em; }
.extras { gap: var(--space-3); }

/* "What shapes your quote": plain pills (not buttons, not links) */
.factors { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.factors li {
  padding: 7px 14px; border: var(--border-hair); border-radius: var(--radius-pill); background: var(--color-surface);
  font-size: var(--step--1); line-height: 1.35; color: var(--color-text-muted);
}

/* Centered icon ring inside a centered stack */
.icon-ring--center { margin-inline: auto; }

/* Commitments: a feature list laid out as a grid */
.feature-list.commit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) clamp(1.5rem, 1rem + 2vw, 3rem); }
@media (max-width: 959px) { .feature-list.commit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .feature-list.commit-grid { grid-template-columns: 1fr; } }

/* Small cards: problem → answer (property managers), and occasions (deep cleans) */
.card .card-answer { color: var(--color-text); font-size: var(--step--1); }
.occasions .card h3 { font-size: var(--step-2); }

/* Area-labelled scope lines ("Lobby and entry: …") */
.ticks .lbl { font-weight: 500; color: var(--color-text); }

/* Three short blocks side by side (pre-opening, post-event, seasonal) */
.trio > div { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-5); border-top: 1px solid var(--color-text); }
.trio h3 { font-size: var(--step-2); }

.related-checklists, .related-areas { margin-top: var(--space-6); }
.related-checklists + .related-areas { margin-top: var(--space-2); }
.section-head .lead { max-width: 46ch; }

/* Glance card variant: a two-column tick list */
.glance-ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--space-4); font-size: var(--step--1); }
.glance-ticks li { padding-left: 26px; }
.glance-ticks li::before { width: 16px; height: 16px; top: 0.3em; }
.glance-card:has(.glance-ticks) { width: min(100%, 29rem); }
.stack > .factors { margin-top: var(--space-5); }
.stack-lg > .section-head { margin-bottom: 0; }

/* Small phones: the frequency tabs share one row as equal segments instead of wrapping inside the pill */
@media (max-width: 479px) {
  .tabs .tablist { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); justify-self: stretch; }
  .tabs .tablist [role="tab"] { padding: 0 4px; font-size: var(--step--2); }
}