/*
 * About Us + Safety & Cleaning sections (core/inc/pages-about.php), shared drawings.
 * Colours come from the theme's --prt-* tokens, so every design (light or dark) reads right.
 * Hopscotch draws its own versions (themes/hopscotch/parts) and styles them separately.
 */

/* ---- Our story: text + photo collage ---- */
.prts-story__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.prts-story__prose p { margin: 0 0 1em; }
.prts-story__points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.prts-story__points li { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--prt-ink); }
.prts-story__tick { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--prt-primary-ground, var(--prt-primary)); color: var(--prt-primary-ink); flex: none; }
.prts .prts-story__tick svg { width: 15px; height: 15px; }
.prts-story__art { position: relative; padding: 0 0 14% 0; }
.prts-story__art.has-two { padding-right: 12%; }
.prts-story__big { border-radius: var(--prt-radius, 22px); overflow: hidden; box-shadow: var(--prt-shadow); }
.prts-story__big img, .prts-story__small img { display: block; width: 100%; object-fit: cover; object-position: 50% 30%; }
.prts-story__big img { aspect-ratio: 4 / 3.4; }
.prts-story__small { position: absolute; right: 0; bottom: 0; width: 46%; border-radius: var(--prt-radius, 22px); overflow: hidden; border: 6px solid var(--prt-surface); box-shadow: var(--prt-shadow); }
.prts-story__small img { aspect-ratio: 1; }
.prts-story__badge { position: absolute; left: -10px; bottom: 6%; display: grid; place-content: center; text-align: center; width: 112px; height: 112px; border-radius: 50%; background: var(--prt-accent); color: var(--prt-accent-ink); box-shadow: var(--prt-shadow); font-family: var(--prt-font-display); line-height: 1; }
.prts-story__badge b { font-size: 2.1rem; }
.prts-story__badge.is-long b { font-size: 1.15rem; line-height: 1.1; padding: 0 12px; overflow-wrap: anywhere; } /* "Since 2010" (round 17, C#3) */
.prts-story__badge span { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; }
@media (max-width: 860px) {
	.prts-story__in { grid-template-columns: 1fr; }
	/* width: the art box holds its size before the photos arrive (auto margins would shrink it to nothing: layout shift). */
	.prts-story__art { order: -1; width: 100%; max-width: 560px; margin-inline: auto; }
	.prts-story__badge { width: 88px; height: 88px; left: 4px; }
	.prts-story__badge b { font-size: 1.6rem; }
	.prts-story__badge.is-long b { font-size: .95rem; padding: 0 8px; }
}

/* ---- Stats band ---- */
.prts.prts-band { padding: clamp(18px, 3vw, 36px) 0; }
.prts-band__list { list-style: none; margin: 0; padding: clamp(26px, 4vw, 44px) clamp(18px, 3vw, 36px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 24px; background: var(--prt-primary-ground, var(--prt-primary)); color: var(--prt-primary-ink); border-radius: var(--prt-radius, 22px); }
.prts-band__list li { display: grid; justify-items: center; text-align: center; gap: 6px; }
.prts-band__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
@supports (color: color-mix(in srgb, red 50%, blue)) { .prts-band__ic { background: color-mix(in srgb, var(--prt-primary-ink) 16%, transparent); } }
.prts .prts-band__ic svg { width: 22px; height: 22px; }
.prts-band__list b { font-family: var(--prt-font-display); font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.prts-band__list li > span:last-child { font-weight: 700; }

/* ---- Values ---- */
.prts-values__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.prts-values__grid.no-guar { grid-template-columns: 1fr; }
.prts-values__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.prts-values__card { background: var(--prt-surface); border: 1px solid var(--prt-line); border-radius: var(--prt-radius, 18px); padding: 26px; }
.prts-values__tick { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--prt-primary-ground, var(--prt-primary)); color: var(--prt-primary-ink); margin-bottom: 14px; }
.prts .prts-values__tick svg { width: 22px; height: 22px; }
.prts .prts-values__card h3 { font-size: 1.2rem; }
.prts .prts-values__card p { margin: 0; }
.prts-values__guar { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; background: var(--prt-accent); color: var(--prt-accent-ink); border-radius: var(--prt-radius, 18px); padding: 30px 28px; }
.prts-values__seal { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--prt-accent-ink); color: var(--prt-accent); }
.prts .prts-values__seal svg { width: 32px; height: 32px; }
.prts .prts-values__guar h3 { color: var(--prt-accent-ink); font-size: 1.5rem; margin: 6px 0 0; }
.prts .prts-values__guar p { color: var(--prt-accent-ink); margin: 0; }
body .prts-values__guar :focus-visible { outline: 3px solid var(--prt-accent-ink); outline-offset: 3px; }
.prts-values__guar .prts-btn { margin-top: 14px; background: var(--prt-accent-ink); border-color: var(--prt-accent-ink); color: var(--prt-accent); }
/* Hover keeps the button's own pair (the generic CTA hover put accent text on the CTA colour, 3.6:1 in Splash). */
.prts-values__guar .prts-btn:not(.prts-btn--ghost):hover { background: var(--prt-accent-ink); border-color: var(--prt-accent-ink); color: var(--prt-accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .prts-values__grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .prts-values__list { grid-template-columns: 1fr; } }

/* ---- Mini reviews ---- */
.prts-minirev__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 30px; }
.prts-minirev__top .prts-head { margin: 0; }
.prts .prts-minirev__score { display: flex; align-items: center; gap: 12px; margin: 0; }
.prts-minirev__score > b { font-family: var(--prt-font-display); font-size: 2.8rem; line-height: 1; color: var(--prt-ink); }
.prts-minirev__score > span { display: grid; gap: 2px; color: var(--prt-accent); }
.prts-minirev__score small { color: var(--prt-muted); font-weight: 700; }
.prts-minirev__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 22px; }
.prts-minirev__card { margin: 0; text-align: left; display: flex; flex-direction: column; gap: 12px; background: var(--prt-surface); border: 1px solid var(--prt-line); border-radius: var(--prt-radius, 18px); padding: 24px; }
.prts-minirev__card .stars { color: var(--prt-accent); display: flex; gap: 2px; }
.prts-minirev__card blockquote { margin: 0; flex: 1; }
.prts .prts-minirev__card blockquote p { color: var(--prt-ink); margin: 0; }
.prts-minirev__card figcaption { text-align: left; display: flex; align-items: center; gap: 12px; }
.prts-minirev__card figcaption > span:last-child { display: grid; }
.prts-minirev__card figcaption small { color: var(--prt-muted); font-size: .8rem; }
.prts-minirev__av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--prt-primary-ground, var(--prt-primary)); color: var(--prt-primary-ink); font-weight: 800; font-family: var(--prt-font-display); }
.prts .prts-minirev__more { text-align: center; margin: 30px 0 0; }

/* ---- Promise chips ---- */
.prts.prts-chips { padding: clamp(22px, 3vw, 36px) 0; }
.prts .prts-chips__label { text-align: center; font-weight: 800; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--prt-primary-text); margin: 0 0 14px; }
.prts-chips__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.prts-chips__list li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--prt-surface); border: 1px solid var(--prt-line); font-weight: 700; color: var(--prt-ink); }
.prts-chips__list svg { color: var(--prt-primary-text); }

/* ---- Cleaning steps: tracker + alternating rows ---- */
.prts-ssteps__grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.prts-ssteps__track { position: sticky; top: calc(var(--pa-top, 0px) + 20px); background: var(--prt-surface); border: 1px solid var(--prt-line); border-radius: var(--prt-radius, 18px); padding: 18px; }
.prts-ssteps__track ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; position: relative; z-index: 1; }
.prts-ssteps__track a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; color: var(--prt-muted); font-weight: 700; text-decoration: none; transition: color .25s, background .25s; }
.prts-ssteps__track a[aria-current] { color: var(--prt-ink); background: var(--prt-surface-alt); }
.prts-ssteps__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--prt-line); background: var(--prt-surface); font-family: var(--prt-font-display); flex: none; transition: background .25s, color .25s, border-color .25s; }
.prts-ssteps__track a[aria-current] .prts-ssteps__n, .prts-ssteps__track a.is-done .prts-ssteps__n { background: var(--prt-primary-ground, var(--prt-primary)); border-color: var(--prt-primary-ground, var(--prt-primary)); color: var(--prt-primary-ink); }
.prts-ssteps__bar { display: block; height: 4px; margin-top: 14px; border-radius: 4px; background: var(--prt-line); overflow: hidden; }
.prts-ssteps__bar i { display: block; height: 100%; width: 100%; background: var(--prt-primary); transform-origin: left; transform: scaleX(var(--pa-p, 0)); transition: transform .2s linear; }
.prts-ssteps__rows { display: grid; gap: clamp(36px, 6vw, 72px); }
.prts-ssteps__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 48px); align-items: center; scroll-margin-top: calc(var(--pa-top, 0px) + 24px); }
.prts-ssteps__row:nth-child(even) .prts-ssteps__img { order: 2; }
.prts-ssteps__img { position: relative; margin: 0; border-radius: var(--prt-radius, 22px); overflow: hidden; }
.prts-ssteps__img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.prts-ssteps__img span { position: absolute; left: 14px; top: 14px; padding: 6px 14px; border-radius: 999px; background: var(--prt-surface); color: var(--prt-ink); font-family: var(--prt-font-display); font-weight: 800; }
.prts .prts-ssteps__body h3 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.prts-ssteps__body .prts-ic { margin: 0; }
@media (max-width: 860px) {
	/* minmax(0, …): a long step name typed by the owner must not widen the page (round 17, C#1). */
	.prts-ssteps__grid { grid-template-columns: minmax(0, 1fr); }
	.prts-ssteps__track { min-width: 0; }
	.prts-ssteps__track { top: var(--pa-top, 0px); z-index: 5; padding: 8px; border-radius: 999px; box-shadow: var(--prt-shadow); }
	.prts-ssteps__track ol { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
	.prts-ssteps__track li, .prts-ssteps__track a { min-width: 0; }
	.prts-ssteps__track a { justify-content: center; gap: 6px; padding: 6px; border-radius: 999px; font-size: .86rem; }
	.prts-ssteps__track a span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.prts-ssteps__n { width: 28px; height: 28px; font-size: .9rem; }
	.prts-ssteps__bar { display: none; }
	/* Phones: three names never fit ("Deep cl…"), so the other steps show their number only and the
	   current step gets the room for its whole name (the hidden names still label the links). */
	@media (max-width: 560px) {
		.prts-ssteps__track ol { display: flex; justify-content: space-between; }
		.prts-ssteps__track li { flex: 0 0 auto; }
		.prts-ssteps__track li:has(> [aria-current]) { flex: 1 1 auto; }
		.prts-ssteps__track a { min-width: 44px; }
		.prts-ssteps__track a:not([aria-current]) span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
	}
	.prts-ssteps__row { grid-template-columns: 1fr; scroll-margin-top: calc(var(--pa-top, 0px) + 80px); }
	.prts-ssteps__row:nth-child(even) .prts-ssteps__img { order: 0; }
}

/* ---- Safety checklist ---- */
.prts-check__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.prts-check__side { position: sticky; top: calc(var(--pa-top, 0px) + 24px); }
.prts .prts-check__count { font-family: var(--prt-font-display); font-weight: 800; font-size: 1.2rem; color: var(--prt-muted); margin: 0 0 22px; }
.prts-check__count b { color: var(--prt-primary-text); font-size: 2.2rem; font-variant-numeric: tabular-nums; }
.prts-check__rules { background: var(--prt-surface-alt); border-radius: var(--prt-radius, 18px); padding: 22px 24px; }
.prts .prts-check__rules h3 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; }
.prts-check__rules ul { margin: 6px 0 0; padding-left: 1.2em; color: var(--prt-muted); display: grid; gap: 6px; }
.prts-check__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.prts-check__list li { display: flex; gap: 16px; align-items: flex-start; background: var(--prt-surface); border: 1px solid var(--prt-line); border-radius: var(--prt-radius, 18px); padding: 20px 22px; transition: border-color .35s, box-shadow .35s; }
.prts-check__list b { font-family: var(--prt-font-display); font-size: 1.12rem; color: var(--prt-ink); }
.prts .prts-check__list p { margin: 4px 0 0; }
.prts-check__box { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--prt-primary); background: var(--prt-primary-ground, var(--prt-primary)); color: var(--prt-primary-ink); flex: none; transition: background .3s, border-color .3s; }
.prts .prts-check__box svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 0; transition: stroke-dashoffset .45s ease .1s; }
.prts-check__list.is-live li:not(.is-checked) .prts-check__box { background: transparent; border-color: var(--prt-line); }
.prts-check__list.is-live li:not(.is-checked) .prts-check__box svg { stroke-dashoffset: 24; }
.prts-check__list.is-live li.is-checked { border-color: var(--prt-primary); }
@media (max-width: 860px) {
	.prts-check__in { grid-template-columns: 1fr; }
	.prts-check__side { position: static; }
}

/* ---- Insurance ---- */
.prts-ins__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.prts-ins__prose p { margin: 0 0 1em; }
.prts-ins__doc { padding: 20px; }
.prts-ins__paper { position: relative; background: #fff; color: #1f2937; border-radius: 14px; padding: 28px 26px 34px; box-shadow: 0 24px 50px rgba(0, 0, 0, .16); rotate: 2deg; border-top: 8px solid var(--prt-primary); }
.prts-ins__head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 2px dashed #e5e7eb; font-family: var(--prt-font-display); font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em; }
.prts-ins__head svg { width: 26px; height: 26px; color: var(--prt-primary); flex: none; }
.prts-ins__row { display: grid; gap: 2px; margin-bottom: 12px; }
.prts-ins__row small { font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #6b7280; }
.prts-ins__row span { font-weight: 700; border-bottom: 1px solid #e5e7eb; padding-bottom: 6px; }
.prts-ins__line { display: block; height: 8px; border-radius: 4px; background: #eef0f3; margin-top: 10px; }
.prts-ins__line.is-short { width: 60%; }
.prts-ins__stamp { position: absolute; right: 18px; bottom: 22px; padding: 8px 14px; border: 3px solid var(--prt-cta-ground, var(--prt-cta)); color: var(--prt-cta-ground, var(--prt-cta)); border-radius: 10px; font-family: var(--prt-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; rotate: -10deg; background: rgba(255, 255, 255, .85); }
@media (max-width: 860px) { .prts-ins__in { grid-template-columns: 1fr; } .prts-ins__doc { max-width: 440px; } }

/* ---- Weather callout ---- */
.prts-weather__box { background: var(--prt-surface-alt); border: 2px dashed var(--prt-primary); border-radius: var(--prt-radius, 22px); padding: clamp(24px, 4vw, 44px); }
.prts-weather__top { display: flex; gap: 20px; align-items: flex-start; }
.prts-weather__ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--prt-primary-ground, var(--prt-primary)); color: var(--prt-primary-ink); flex: none; }
.prts .prts-weather__ic svg { width: 30px; height: 30px; }
.prts .prts-weather__top h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.prts .prts-weather__top p { margin: 0; max-width: 62ch; }
.prts-weather__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.prts-weather__list li { display: flex; gap: 12px; align-items: flex-start; background: var(--prt-surface); border-radius: var(--prt-radius-sm, 14px); padding: 16px 18px; }
.prts-weather__list svg { color: var(--prt-primary-text); margin-top: 3px; }
.prts-weather__list b { font-family: var(--prt-font-display); color: var(--prt-ink); }
.prts .prts-weather__list p { margin: 2px 0 0; font-size: .95rem; line-height: 1.55; }
@media (max-width: 560px) { .prts-weather__top { flex-direction: column; } }

@media (prefers-reduced-motion: reduce) {
	.prts-ssteps__bar i, .prts-check__box, .prts-check__box svg, .prts-check__list li, .prts-ssteps__track a, .prts-ssteps__n { transition: none !important; }
}

/* Phones (polish round 2): the sticky cleaning-steps track keeps 44px targets. */
@media (max-width: 860px) { .prts-ssteps__track a { min-height: 44px; } }

/* Tablets (polish round 3). */
/* Stats band: up to four figures stay on one row from 700px (3 + 1 before);
   two by two below that. */
@media (min-width: 700px) {
	.prts-band__list:not(:has(> li:nth-child(5))) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 18px; }
}
@media (min-width: 420px) and (max-width: 699px) {
	.prts-band__list:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Three review cards / three weather notes: three across from 700px instead of 2 + 1. */
@media (min-width: 700px) {
	.prts-minirev__grid:has(> :nth-child(3):last-child), .prts-weather__list:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 700px) and (max-width: 1000px) {
	.prts-minirev__card { padding: 20px; }
	.prts-weather__list li { padding: 14px; }
}
/* Portrait tablets (701-860px): the cleaning steps keep photo beside text. */
@media (min-width: 701px) and (max-width: 860px) {
	.prts-ssteps__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
	.prts-ssteps__row:nth-child(even) .prts-ssteps__img { order: 2; }
}

/* Polish round 9 (C#5): the insurance card's two-line bold heading groups at 1.35. */
.prts-ins__head { line-height: 1.35; }

/* Hover (polish round 11): a step link that is not the current one shows it can be clicked. */
.prts-ssteps__track a:not([aria-current]):hover { color: var(--prt-ink); background: var(--prt-surface-alt); }