/* ==========================================================================
   Company pages: About, FAQ, Contact, Careers, Reviews and the 404 page.
   Owner: "company" builder. Loaded via front matter "styles": ["company.css"].
   Layout only; every color, size and radius comes from the tokens in site.css.
   ========================================================================== */

/* Fact lists inside a stack keep the stack rhythm (site.css covers the other list components) */
.stack > * + .facts { margin-top: var(--space-4); }
.stack-lg > * + .facts { margin-top: var(--space-stack); }
/* A note on a linen band would disappear into it */
.section--band > .container > .note,
.section--band .co-aside .note,
.section--band .stack > .note { background: var(--gt-white); border: var(--border-hair); }

/* ---------- Typographic hero: icon ring beside the eyebrow, and the broken circle drawn large behind the copy ---------- */
.co-hero { position: relative; overflow: hidden; isolation: isolate; }
.co-hero > .container { position: relative; z-index: 1; }
.co-kicker { display: flex; align-items: center; gap: var(--space-3); }
.co-kicker .icon-ring { width: 48px; height: 48px; }
.co-kicker .icon-ring .icon { width: 22px; height: 22px; }
.co-hero-arc {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(24rem, 14rem + 22vw, 38rem); height: auto; aspect-ratio: 1;
  right: max(-6rem, calc((100vw - var(--container)) / 2 - 8rem)); top: 50%; translate: 0 -46%;
  color: var(--gt-ink); --arc-w: 0.28;
}
/* The mark inside the big circle (About: the script wordmark; other pages: a single line icon) */
.co-hero-mark {
  position: absolute; z-index: 0; pointer-events: none; display: grid; place-items: center;
  width: clamp(24rem, 14rem + 22vw, 38rem); aspect-ratio: 1;
  right: max(-6rem, calc((100vw - var(--container)) / 2 - 8rem)); top: 50%; translate: 0 -46%;
  color: var(--gt-ink);
}
.co-hero-mark img { width: 46%; height: auto; opacity: 0.9; }
.co-hero-mark .icon { width: 15%; height: auto; aspect-ratio: 1; opacity: 0.8; }
/* Keep the copy clear of the circle on mid-size screens. Below 860px the copy runs full width, so the large circle
   could only sit behind it or be clipped into stray strokes by the hero's edge: it is dropped there, and the icon
   ring beside the eyebrow carries the broken-circle motif on its own. */
@media (min-width: 860px) and (max-width: 1179px) { .co-hero h1 { max-width: min(18ch, 62vw); } .co-hero .lead { max-width: min(46ch, 58vw); } }
@media (max-width: 859px) {
  .co-hero h1, .co-hero .lead { max-width: none; }
  .co-hero-arc, .co-hero-mark { display: none; }
}

/* Jump links under a hero (FAQ topics, careers roles) */
.co-jump { display: grid; gap: var(--space-3); }
.co-jump .label { font-size: var(--step--2); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-subtle); }
.co-jump .chip { background: var(--gt-white); }
@media (min-width: 860px) { .co-jump .chip-row { max-width: min(40rem, 58vw); } }
/* A closing link card that fills the last grid cell */
.co-cards .card--band { display: grid; align-content: space-between; gap: var(--space-4); }

/* A segmented control with four options (Careers "Cleaning experience") can't hold one row on a phone:
   two rows of two below 440px, so no option is ever cut off (WCAG 1.4.10 reflow at 320px) */
@media (max-width: 439px) {
  .seg.co-seg-wrap { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--radius-l); }
}

/* Choice chips inside forms: a check mark on the selected chip, so state never relies on color alone */
.chip-row.is-choice .chip { min-height: 44px; }
.chip-row.is-choice .chip:has(input:checked)::before {
  content: ""; width: 16px; height: 16px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Fact list (About trust facts, Careers "at a glance"): label beside value, hairline rows */
.facts { margin: 0; border-top: 1px solid var(--gt-ink); }
.facts > div { display: grid; grid-template-columns: minmax(10rem, 0.8fr) minmax(0, 2fr); gap: var(--space-2) var(--space-5); align-items: start; padding: var(--space-4) 0; border-bottom: var(--border-hair); }
.facts dt { display: flex; align-items: flex-start; gap: var(--space-3); font-weight: 500; }
.facts dt .icon { width: 22px; height: 22px; margin-top: 2px; color: var(--color-accent); flex-shrink: 0; }
.facts dd { margin: 0; color: var(--color-text-muted); }
.facts dd a { color: var(--color-text); }
@media (max-width: 599px) { .facts > div { grid-template-columns: 1fr; } .facts dd { padding-left: calc(22px + var(--space-3)); } }

/* Owner portrait placeholder (About) */
.co-portrait { aspect-ratio: 4 / 5; width: 100%; max-width: 26rem; justify-self: center; }
.co-portrait .icon { width: 40px; height: 40px; }
@media (max-width: 859px) { .co-portrait { max-width: 17rem; } }
.co-signature { height: 56px; width: auto; }

/* Small commitment cards: icon ring, a short title, one or two sentences */
.co-cards { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.co-cards .card h3 { font-size: var(--step-2); }
.co-cards .card p { color: var(--color-text-muted); font-size: var(--step--1); }

/* Two-column feature list (the Gentle Touch Standard) */
@media (min-width: 760px) { .feature-list.co-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-7); row-gap: var(--space-5); } }
.co-standard-head { max-width: 40rem; }

/* Form sections: an explanation beside a wider form card */
.co-form { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.co-form > .co-aside { position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 899px) { .co-form { grid-template-columns: 1fr; } .co-form > .co-aside { position: static; } }
.form .form-lead { font-size: var(--step--1); color: var(--color-text-muted); }

/* 1-to-5 rating with its meaning written on every option (never color or position alone) */
.seg.co-rating label { display: grid; gap: 2px; padding-block: 8px; min-height: 56px; }
.seg.co-rating .co-rating-word { font-size: var(--step--2); letter-spacing: 0.02em; }
@media (max-width: 419px) {
  .seg.co-rating { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
  .seg.co-rating label { padding-inline: 2px; }
  .seg.co-rating .co-rating-word { font-size: 0.7rem; letter-spacing: 0; }
}

/* Promise cards: keep text painted above the decorative arc (it overlaps copy on narrow screens) */
.promise > :not(.gt-arc) { position: relative; }

/* Reviews: the empty-state card hides itself as soon as real review cards are rendered */
.reviews-wall { display: grid; gap: var(--space-6); }
.reviews-wall:has(.quote-card) .reviews-empty { display: none; }
.reviews-empty > :not(.gt-arc) { max-width: 42rem; }
.reviews-empty h3 { font-size: var(--step-3); margin-bottom: var(--space-4); }

/* FAQ: topic list beside the answers */
.faq-group { scroll-margin-top: calc(var(--header-h) + 16px); }
.faq-group + .faq-group { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.faq-group > .faq-group-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.faq-group > .faq-group-head h2 { font-size: var(--step-4); }
.faq-group > .faq-group-head p { font-size: var(--step--1); color: var(--color-text-muted); margin-top: var(--space-1); }
.faq .faq-body ul { margin: 0; }
.toc .toc-label { font-size: var(--step--2); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: var(--space-3); }
.toc .toc-help { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-hair); display: grid; gap: var(--space-2); }
.toc .toc-help a { padding-left: 0; border: 0; margin: 0; color: var(--color-text); text-decoration: underline; }
/* Phones and tablets already have the topic chips in the hero */
@media (max-width: 899px) { .with-toc > .toc { display: none; } }

/* Contact: hours card */
.hours-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.hours-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; }
.hours-list .icon { width: 22px; height: 22px; margin-top: 2px; color: var(--color-accent); }

/* Careers: a role card with duties and requirements */
.co-role { display: grid; gap: var(--space-4); align-content: start; }
.co-role h4 { font-size: var(--step--2); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-text-subtle); margin-top: var(--space-2); }
.co-role .ticks { font-size: var(--step--1); }

/* 404 */
.nf { position: relative; overflow: hidden; }
.nf .container { justify-items: center; text-align: center; }
.nf h1 { margin-inline: auto; }
.nf .lead { margin-inline: auto; }
.nf .btn-row { justify-content: center; }
.nf-mark { position: relative; width: clamp(7.5rem, 5rem + 10vw, 11rem); aspect-ratio: 1; display: grid; place-items: center; color: var(--gt-ink); }
.nf-mark .gt-arc { position: absolute; inset: 0; --arc-w: 1.1; }
.nf-mark span { font: 400 var(--step-5)/1 var(--font-display); font-variant-numeric: lining-nums; }

/* Pages with the mobile sticky bar turned off ("stickyBar": false + "bodyClass": "no-sticky-bar", e.g. Careers)
   shouldn't keep the bar's reserved space, which otherwise shows as a linen strip under the footer on phones. */
:root:has(body.no-sticky-bar) { --sticky-bar-h: 0px; }
body.no-sticky-bar { padding-bottom: 0; }