/* Cleancraft — inner-page components (editorial). Arm / service-hub / B2B / about /
   reviews / contact-booking. References style.css + home.css tokens only. */

/* ---- breadcrumb ---- */
.breadcrumb { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); }
.breadcrumb a { color: var(--c-muted); transition: color var(--d-fast); }
.breadcrumb a:hover { color: var(--c-ink); }
.breadcrumb span[aria-current] { color: var(--c-body); }
.breadcrumb__sep { color: var(--c-mint-deep); }

/* ════ PAGE HERO (inner) — always ≤ one 1080p screen ════ */
.page-hero { min-height: clamp(380px, 64svh, 720px); display: grid; grid-template-columns: 1.05fr 0.95fr; border-bottom: var(--hair); }
.page-hero--solo { grid-template-columns: 1fr; min-height: clamp(300px, 48svh, 520px); }
.page-hero--ink { background: var(--c-ink); color: var(--c-on-dark); }
.page-hero--ink h1 { color: var(--c-cream); }
.page-hero--ink h1 em { color: var(--c-stone); }
.page-hero--ink .eyebrow { color: var(--c-muted); }
.page-hero__text { display: flex; flex-direction: column; justify-content: center; gap: var(--s-5); padding: clamp(32px, 5vh, 72px) clamp(24px, 4vw, 72px); border-right: var(--hair); }
.page-hero--solo .page-hero__text { border-right: 0; align-items: flex-start; max-width: 60ch; }
.page-hero--ink .page-hero__text { border-right-color: var(--c-divide-dark); }
.page-hero__eyebrow { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track); color: var(--c-muted); display: inline-flex; align-items: center; gap: var(--s-2); }
.page-hero h1 { font-size: var(--t-2xl); }
.page-hero .lede { max-width: 46ch; }
.page-hero__media { position: relative; overflow: hidden; background: var(--c-stone); }
.page-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero__quote { font-family: var(--font-display); font-style: italic; font-size: var(--t-md); color: var(--c-body); }
.page-hero--ink .page-hero__quote { color: var(--c-stone); }
@media (max-width: 880px) {
  .page-hero { grid-template-columns: 1fr; min-height: 0; }
  .page-hero__text { border-right: 0; order: 2; padding-block: var(--s-12); }
  .page-hero__media { order: 1; min-height: 44svh; }
}

/* ════ SERVICE ROWS — writeup (italic) left / rates right ════ */
.svc-rows { border: var(--hair); }
.svc-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: var(--hair); }
.svc-row:last-child { border-bottom: 0; }
.svc-row__write { padding: clamp(28px, 3vw, 48px); border-right: var(--hair); display: flex; flex-direction: column; gap: var(--s-4); }
.svc-row__name { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 400; color: var(--c-ink); }
.svc-row__name .plus { font-size: 0.7em; }
.svc-row__write p { font-family: var(--font-display); font-style: italic; font-size: var(--t-md); line-height: 1.6; color: var(--c-body); }
.svc-row__write .note { font-family: var(--font-body); font-style: normal; font-size: var(--t-sm); color: var(--c-muted); padding-top: var(--s-4); border-top: var(--hair); margin-top: auto; }
.svc-row__rates { padding: clamp(28px, 3vw, 48px); background: var(--c-cream-deep); }
.svc-row__rates h4 { font-family: var(--font-body); font-weight: 300; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track); color: var(--c-muted); margin-bottom: var(--s-4); }
.rate-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.rate-table tr { border-bottom: var(--hair); }
.rate-table tr:last-child { border-bottom: 0; }
.rate-table td { padding: var(--s-3) 0; vertical-align: baseline; color: var(--c-body); }
.rate-table td small { display: block; color: var(--c-faint); font-size: var(--t-xs); }
.rate-table .r-val { text-align: right; white-space: nowrap; padding-left: var(--s-6); font-family: var(--font-display); font-size: var(--t-md); color: var(--c-ink); }
.rate-legend { font-size: var(--t-xs); color: var(--c-faint); margin-top: var(--s-4); }
@media (max-width: 880px) { .svc-row { grid-template-columns: 1fr; } .svc-row__write { border-right: 0; border-bottom: var(--hair); } }

/* ════ PROSE (about / writeups) ════ */
.prose { max-width: 62ch; }
.prose h2 { font-size: var(--t-lg); margin-top: var(--s-12); }
.prose h2 em { font-style: italic; color: var(--c-body); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: var(--s-4); color: var(--c-body); line-height: 1.8; }
.factlist { list-style: none; padding: var(--s-4) 0 0; margin-top: var(--s-4); border-top: var(--hair); display: flex; flex-direction: column; }
.factlist li { padding: var(--s-3) 0; border-bottom: var(--hair); color: var(--c-body); display: flex; gap: var(--s-3); }
.factlist li::before { content: "+"; color: var(--c-mint-deep); }
.factlist b { color: var(--c-ink); font-weight: 400; }

/* ════ B2B AUDIENCE CARDS ════ */
.aud-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hair-gap); background: var(--c-border); border: var(--hair); }
.aud-card { background: var(--c-cream); display: flex; flex-direction: column; }
.aud-card:nth-child(even) { background: var(--c-cream-deep); }
.aud-card__media { position: relative; overflow: hidden; height: 180px; background: var(--c-stone); }
.aud-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--ease-out); }
.aud-card:hover .aud-card__media img { transform: scale(1.05); }
.aud-card__body { padding: clamp(22px, 2vw, 32px); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.aud-card__tag { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track); color: var(--c-muted); }
.aud-card__name { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 400; color: var(--c-ink); }
.aud-card__desc { font-size: var(--t-sm); color: var(--c-body); }
.aud-card__list { list-style: none; padding: var(--s-3) 0 0; margin: 0 0 var(--s-4); border-top: var(--hair); display: flex; flex-direction: column; flex: 1; }
.aud-card__list li { font-size: var(--t-sm); color: var(--c-body); padding: var(--s-2) 0; border-bottom: var(--hair); display: flex; gap: var(--s-2); }
.aud-card__list li::before { content: "+"; color: var(--c-mint-deep); }
.aud-card__cta { align-self: flex-start; }
/* 4 audiences: 4-up → 2×2 → stacked. Never 3+1. */
@media (max-width: 1080px) { .aud-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px) { .aud-cards { grid-template-columns: 1fr; } }

/* ════ WHY-PARTNER / REASONS GRID ════ */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hair-gap); background: var(--c-border); border: var(--hair); }
.why-cell { background: var(--c-cream); padding: clamp(24px, 2.4vw, 40px); display: flex; flex-direction: column; gap: var(--s-2); }
.why-cell__num { font-family: var(--font-display); font-style: italic; font-size: var(--t-num); color: var(--c-stone); line-height: 1; }
.why-cell h3 { font-size: var(--t-md); font-family: var(--font-display); font-weight: 400; }
.why-cell p { font-size: var(--t-sm); color: var(--c-body); }
.why-cell--cta { background: var(--c-cream-deep); justify-content: center; gap: var(--s-3); }
.why-cell--cta h3 { color: var(--c-ink); }
.why-cell--cta .link-ul { margin-top: var(--s-2); }
@media (max-width: 880px) { .why-grid { grid-template-columns: 1fr; } }

/* ════ FLOW (how it works) ════ */
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--hair-gap); background: var(--c-border); border: var(--hair); }
.flow__step { background: var(--c-cream); padding: clamp(22px, 2.2vw, 36px); display: flex; flex-direction: column; gap: var(--s-2); }
.flow__num { font-family: var(--font-display); font-style: italic; font-size: var(--t-num); color: var(--c-mint-deep); line-height: 1; }
.flow__step h3 { font-size: var(--t-md); font-family: var(--font-display); font-weight: 400; }
.flow__step p { font-size: var(--t-sm); color: var(--c-body); }

/* ════ FORM (enquiry / booking) ════ */
.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; gap: var(--s-5); grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track); color: var(--c-muted); }
.field input, .field select, .field textarea { font-family: var(--font-body); font-weight: 300; font-size: var(--t-base); color: var(--c-ink); background: transparent; border: 0; border-bottom: var(--hair-ink); padding: var(--s-2) 0; transition: border-color var(--d-base); }
.field input::placeholder, .field textarea::placeholder { color: var(--c-faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--c-mint-deep); }
.field textarea { resize: vertical; min-height: 96px; }
.form__note { font-size: var(--t-xs); color: var(--c-muted); }
@media (max-width: 680px) { .form__row { grid-template-columns: 1fr; } }

/* ════ BOOKING STEPPER (4-screen) ════ */
.stepper { border: var(--hair); }
.stepper__bar { display: flex; border-bottom: var(--hair); }
.stepper__tab { flex: 1; padding: var(--s-4) var(--s-3); text-align: center; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track); color: var(--c-faint); border-right: var(--hair); position: relative; }
.stepper__tab:last-child { border-right: 0; }
.stepper__tab[data-on="true"] { color: var(--c-ink); }
.stepper__tab[data-on="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.5px; height: 1.5px; background: var(--c-mint-deep); }
.stepper__panel { padding: clamp(28px, 3.4vw, 56px); display: none; }
.stepper__panel[data-active="true"] { display: block; animation: panelIn var(--d-base) var(--ease-out); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stepper__panel[data-active="true"] { animation: none; } }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-6); }
.choice { text-align: left; padding: var(--s-6); border: var(--hair); background: var(--c-cream); cursor: pointer; display: flex; flex-direction: column; gap: var(--s-2); transition: border-color var(--d-base), background var(--d-base); font-family: inherit; }
.choice:hover, .choice[aria-pressed="true"] { border-color: var(--c-ink); background: var(--c-cream-deep); }
.choice[aria-pressed="true"] { box-shadow: inset 2px 0 0 var(--c-mint-deep); }
.choice__num { font-family: var(--font-display); font-style: italic; color: var(--c-mint-deep); }
.choice__name { font-family: var(--font-display); font-size: var(--t-md); color: var(--c-ink); }
.choice__tag { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); }
.stepper__nav { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-8); padding-top: var(--s-6); border-top: var(--hair); }
.review-line { display: flex; justify-content: space-between; gap: var(--s-6); padding: var(--s-3) 0; border-bottom: var(--hair); font-size: var(--t-sm); }
.review-line dt { color: var(--c-muted); } .review-line dd { color: var(--c-ink); }
@media (max-width: 680px) { .choice-grid { grid-template-columns: 1fr; } }

/* ════ REVIEWS ════ */
.rating-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-4) var(--s-8); padding-bottom: var(--s-8); border-bottom: var(--hair); }
.rating-summary__score { font-family: var(--font-display); font-size: var(--t-2xl); color: var(--c-ink); line-height: 1; }
.rating-summary__stars { color: var(--c-mint-deep); letter-spacing: 0.1em; font-size: var(--t-md); }
.rating-summary__meta { font-size: var(--t-sm); color: var(--c-muted); }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hair-gap); background: var(--c-border); border: var(--hair); margin-top: var(--s-12); }
.review-card { background: var(--c-cream); padding: clamp(24px, 2.2vw, 36px); display: flex; flex-direction: column; gap: var(--s-3); }
.review-card__stars { color: var(--c-mint-deep); letter-spacing: 0.1em; font-size: var(--t-sm); }
.review-card blockquote { font-family: var(--font-display); font-style: italic; font-size: var(--t-md); line-height: 1.5; color: var(--c-ink); }
.review-card cite { font-style: normal; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track); color: var(--c-muted); margin-top: auto; }
@media (max-width: 880px) { .review-grid { grid-template-columns: 1fr; } }

/* ════ GENERATED SERVICE-PAGE SECTIONS (build.py) — editorial ════ */
/* what's included */
.checklist { list-style: none; padding: var(--s-4) 0 0; margin-top: var(--s-6); border-top: var(--hair); display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0; }
.checklist li { padding: var(--s-3) var(--s-4) var(--s-3) 0; color: var(--c-body); font-size: var(--t-base); display: flex; gap: var(--s-3); border-bottom: var(--hair); }
.checklist li::before { content: "+"; color: var(--c-mint-deep); }
/* honesty callout (not included / scope) */
.callout { margin-top: var(--s-8); padding: var(--s-6) var(--s-8); border: var(--hair); border-left: 2px solid var(--c-mint-deep); background: var(--c-cream-deep); }
.callout__label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track); color: var(--c-muted); }
.callout p { margin-top: var(--s-2); color: var(--c-body); font-size: var(--t-sm); }
/* dual band (proof + safety) */
.dual { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hair-gap); background: var(--c-border); border: var(--hair); }
.dual__col { background: var(--c-cream); padding: clamp(24px, 2.4vw, 40px); display: flex; flex-direction: column; gap: var(--s-2); }
.dual__col .eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.dual__col h2 { font-size: var(--t-lg); }
.dual__col p { color: var(--c-body); font-size: var(--t-sm); }
@media (max-width: 880px) { .dual { grid-template-columns: 1fr; } }
/* pricing tables (parser uses price-* classes) */
.pricing__intro { margin-top: var(--s-3); color: var(--c-body); font-size: var(--t-sm); max-width: 60ch; }
.price-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--hair-gap); background: var(--c-border); border: var(--hair); margin-top: var(--s-8); }
.price-group { background: var(--c-cream-deep); padding: clamp(24px, 2.4vw, 36px); }
.price-group__title { font-family: var(--font-display); font-size: var(--t-md); color: var(--c-ink); margin-bottom: var(--s-1); }
.price-group__note { font-size: var(--t-xs); color: var(--c-muted); margin-bottom: var(--s-4); }
.price-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.price-table tr { border-bottom: var(--hair); }
.price-table tr:last-child { border-bottom: 0; }
.price-table__label { padding: var(--s-3) 0; color: var(--c-body); vertical-align: baseline; }
.price-table__label small { display: block; color: var(--c-faint); font-size: var(--t-xs); }
.price-table__val { text-align: right; white-space: nowrap; padding: var(--s-3) 0 var(--s-3) var(--s-6); font-family: var(--font-display); font-size: var(--t-md); color: var(--c-ink); }
.price-note-legend { font-size: var(--t-xs); color: var(--c-faint); margin-top: var(--s-6); padding-top: var(--s-4); border-top: var(--hair); }

/* ---- contact details ---- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(var(--s-8), 5vw, var(--s-24)); align-items: start; }
.contact-details { display: grid; gap: 0; border: var(--hair); }
.contact-details div { display: flex; justify-content: space-between; gap: var(--s-6); padding: var(--s-4) var(--s-6); border-bottom: var(--hair); }
.contact-details div:last-child { border-bottom: 0; }
.contact-details dt { font-size: var(--t-sm); color: var(--c-muted); }
.contact-details dd { font-size: var(--t-sm); color: var(--c-ink); text-align: right; }
.contact-details dd.is-pending { color: var(--c-faint); font-style: italic; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

/* ════ ACCORDION (post-reno scope / FAQ) — native <details>, revision 2026-08-06 item 5 ════ */
.accord { border: var(--hair); margin-top: var(--s-8); }
.accord__item { border-bottom: var(--hair); }
.accord__item:last-child { border-bottom: 0; }
.accord__item > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: var(--s-4); padding: clamp(18px,2vw,26px) clamp(20px,2.4vw,32px); font-family: var(--font-display); font-size: var(--t-md); font-weight: 400; color: var(--c-ink); transition: background var(--d-fast); }
.accord__item > summary::-webkit-details-marker { display: none; }
.accord__item > summary::before { content: "+"; color: var(--c-mint-deep); font-family: var(--font-body); font-size: 1.1em; line-height: 1; flex: none; transition: transform var(--d-base) var(--ease-out); }
.accord__item[open] > summary::before { transform: rotate(45deg); }
.accord__item > summary:hover { background: var(--c-cream-deep); }
.accord__body { padding: 0 clamp(20px,2.4vw,32px) clamp(20px,2.4vw,28px) calc(clamp(20px,2.4vw,32px) + 1.1em + var(--s-4)); }
.accord__body p { color: var(--c-body); font-size: var(--t-sm); line-height: 1.7; }
.accord__body p + p { margin-top: var(--s-3); }
@media (prefers-reduced-motion: reduce) { .accord__item > summary::before { transition: none; } }

/* ════ OPTIONAL ADD-ON CARDS (2-up) — revision 2026-08-06 item 5 ════ */
.addon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hair-gap); background: var(--c-border); border: var(--hair); margin-top: var(--s-8); }
.addon { background: var(--c-cream); padding: clamp(26px,2.6vw,44px); display: flex; flex-direction: column; gap: var(--s-3); }
.addon__num { font-family: var(--font-display); font-style: italic; font-size: var(--t-num); color: var(--c-mint-deep); line-height: 1; }
.addon__name { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 400; color: var(--c-ink); }
.addon p { font-size: var(--t-sm); color: var(--c-body); line-height: 1.7; }
.addon__best { font-size: var(--t-sm); color: var(--c-body); padding-top: var(--s-3); border-top: var(--hair); }
.addon__best b { color: var(--c-ink); font-weight: 400; }
.addon__price { font-family: var(--font-display); font-size: var(--t-lg); color: var(--c-ink); margin-top: auto; padding-top: var(--s-5); }
.addon__price small { font-family: var(--font-body); font-size: var(--t-xs); color: var(--c-muted); text-transform: uppercase; letter-spacing: var(--track); display: block; margin-bottom: var(--s-1); }
@media (max-width: 880px) { .addon-grid { grid-template-columns: 1fr; } }

/* ════ EXCLUSION LIST (what's not included) — revision 2026-08-06 item 5 ════ */
.exlist { list-style: none; padding: var(--s-4) 0 0; margin-top: var(--s-6); border-top: var(--hair); display: flex; flex-direction: column; }
.exlist li { padding: var(--s-3) 0; border-bottom: var(--hair); color: var(--c-body); display: flex; gap: var(--s-3); }
.exlist li:last-child { border-bottom: 0; }
.exlist li::before { content: "\2013"; color: var(--c-faint); flex: none; }

/* flow variant for a clean single row of 5 steps (post-reno method) — no ragged last row */
.flow--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1080px) { .flow--5 { grid-template-columns: 1fr; } }

/* ════ PROCESS (vertical numbered steps — roomy alt to .flow for 5+ steps) ════ */
.process { border: var(--hair); margin-top: var(--s-8); }
.process__step { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--s-6); padding: clamp(20px,2.4vw,34px) clamp(22px,2.6vw,40px); border-bottom: var(--hair); align-items: baseline; }
.process__step:last-child { border-bottom: 0; }
.process__num { font-family: var(--font-display); font-style: italic; font-size: var(--t-num); color: var(--c-mint-deep); line-height: 1; }
.process__body h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-lg); color: var(--c-ink); }
.process__body p { font-size: var(--t-sm); color: var(--c-body); margin-top: var(--s-2); max-width: 64ch; line-height: 1.7; }
@media (max-width: 640px) { .process__step { grid-template-columns: 1fr; gap: var(--s-2); } }

/* tighter 2-group pricing (post-reno) — keeps the two size bands as a compact centered band */
.price-groups--tight { max-width: 860px; margin-inline: auto; }