/* Office cleaning and medical & dental office cleaning pages (builder: services-a).
   Small additions only; every component comes from site.css. All rules are scoped to .svc-* classes.
   (The old residential hub/pricing rules that lived here were retired with the commercial rebuild, 2026-10-08.) */

/* ---------- Typographic split hero: icon ring beside the eyebrow, a "glance" card with the arc motif ---------- */
.svc-kicker { display: flex; align-items: center; gap: var(--space-3); }
.svc-kicker .icon-ring { width: 48px; height: 48px; }
.svc-kicker .icon-ring .icon { width: 22px; height: 22px; }
.svc-hero .btn-row { margin-top: var(--space-2); }
/* Two-part eyebrow ("Medical & dental offices · Roanoke Valley"): the parts wrap as whole units, and the dot shows only
   when both share a line. Every part carries a dot; the eyebrow is shifted left by one dot's width and that strip is
   clipped, so a dot that would start a line is never seen. */
.svc-eyebrow { --sep: 1.6em; display: flex; flex-wrap: wrap; margin-left: calc(var(--sep) * -1); clip-path: inset(0 0 0 var(--sep)); }
.svc-eyebrow > span { padding-left: var(--sep); text-indent: calc(var(--sep) * -1); } /* a part that wraps on its own keeps its second line visible */
.svc-eyebrow > span::before { content: "\00B7"; content: "\00B7" / ""; display: inline-block; width: var(--sep); text-align: center; text-indent: 0; }
@media (max-width: 359px) { .svc-eyebrow-loc { display: none; } }

.svc-hero-visual { position: relative; isolation: isolate; align-self: center; width: 100%; max-width: 30rem; justify-self: end; }
/* One long arc (not the usual two dashes), centered on the card and a little larger than it: it climbs the card's left
   side, passes under its top-left corner and runs along the top, so it never reaches past the container */
.svc-hero-visual > .svc-hero-arc { position: absolute; z-index: -1; width: 120%; height: auto; aspect-ratio: 1; left: -10%; top: 50%;
  translate: 0 -50%; color: var(--gt-ink); --arc-w: 0.3; pointer-events: none; }
.reveal-ready .svc-hero-arc.gt-arc--draw circle { stroke-dasharray: 0 360; }
.reveal-ready .svc-hero-arc.gt-arc--draw.is-drawn circle { stroke-dasharray: 130 230; }
.svc-glance { position: relative; display: grid; gap: var(--space-4); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--gt-white); border: var(--border-hair); border-radius: var(--radius-l); box-shadow: var(--shadow-2); }
.svc-glance-title { font: 500 var(--step-3)/1.15 var(--font-display); letter-spacing: var(--tracking-display); max-width: 22ch; }
.svc-glance .ticks { font-size: var(--step--1); gap: 8px; }
.svc-glance > .subtle { padding-top: var(--space-4); border-top: var(--border-hair); }
@media (max-width: 859px) {
  .svc-hero-visual { justify-self: stretch; max-width: 34rem; margin-top: var(--space-4); }
  .svc-hero-visual > .svc-hero-arc { display: none; }
}

/* ---------- Small heading inside cards and tiles ---------- */
.svc-card-sub { font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gt-ink-3); }
.svc-factors .card { padding: var(--space-5); gap: var(--space-2); }
.svc-card-ticks { font-size: var(--step--1); color: var(--color-text-muted); }
.svc-factors .card h3 { font-size: var(--step-1); }

/* ---------- Scope tabs (panels stay grid; site.css [hidden] uses !important, so hidden panels stay hidden) ---------- */
.svc-scope [role="tabpanel"] { display: grid; gap: var(--space-5); }
.svc-scope [role="tabpanel"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; border-radius: var(--radius-xs); }
.svc-scope .ticks { font-size: var(--step--1); }
.svc-scope .ticks li { padding-block: 2px; }
.svc-scope [role="tabpanel"]:has(> .svc-panel-lead) { gap: var(--space-3); }
.svc-panel-lead { font-size: var(--step--1); color: var(--color-text-subtle); }
/* Phones: the four frequency tabs share one row as equal segments instead of wrapping inside the pill */
@media (max-width: 479px) {
  .svc-scope .tablist { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); justify-self: stretch; }
  .svc-scope .tablist [role="tab"] { padding: 0 4px; font-size: var(--step--2); }
}

/* ---------- Plant, warehouse and flex-building offices (a card under "Who it's for") ---------- */
.svc-plant { display: grid; gap: var(--space-5) var(--space-8); margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.svc-plant .ticks { font-size: var(--step--1); }
.svc-plant .ticks--x { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-hair); }
@media (min-width: 860px) { .svc-plant { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; } }

/* ---------- Habits list in two columns on wide screens, set off from the steps above it ---------- */
.svc-habits { padding-top: var(--space-6); border-top: var(--border-hair); }
.svc-two-col { gap: var(--space-5) var(--space-7); }
@media (min-width: 760px) { .svc-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Trust facts (tokens) ---------- */
.svc-facts dl { margin: 0; border-top: 1px solid var(--gt-ink); }
.svc-facts dl > div { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--border-hair); }
.svc-facts dt { font-weight: 500; }
.svc-facts dd { margin: 0; color: var(--color-text-muted); font-size: var(--step--1); }
@media (max-width: 559px) { .svc-facts dl > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- "Who cleans what" table (3 columns; row headers wrap) ---------- */
table.data.svc-who tbody th[scope="row"] { white-space: normal; width: 22%; }
table.data.svc-who td { width: 39%; }
table.data.svc-who thead th:last-child, table.data.svc-who tbody td:last-child { background: var(--gt-linen); }
@media (max-width: 719px) {
  table.data.svc-who { font-size: var(--step--2); }
  table.data.svc-who tbody th[scope="row"] { min-width: 0; }
}

/* ---------- Centered statistic band (restrooms) ---------- */
.svc-stat .pull { margin-inline: auto; font-size: var(--step-3); max-width: 26ch; }
.svc-stat .src { font-size: var(--step--1); color: var(--color-text-muted); }

/* ---------- Price-placeholder card (no numbers, ever) ---------- */
.svc-price-note { margin-top: var(--space-7); display: grid; gap: var(--space-5) var(--space-8); align-items: center; }
.svc-price-note .pull { font-size: var(--step-3); max-width: 26ch; }
@media (min-width: 860px) { .svc-price-note { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }