/* Service pages (Interior, Exterior and the add-ons): process steps, what-we-paint grid, included list,
   part-of-your-project split. The hero, FAQ, quotes and estimate band are shared and live in main.css. */

/* Process steps: photo and text alternating, stacked below 760px */
.steps__inner { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px); padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(64px, 8vw, 104px); }
.steps__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }
.step { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(24px, 4vw, 64px); align-items: center; }
.step--flip { direction: rtl; }
.step--flip > * { direction: ltr; }
.step__media { display: block; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--radius-card); background: var(--panel-2); }
.step__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.step__text { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.step__title { font-family: var(--font-body); font-size: 26px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; text-wrap: balance; }
.step__text p { font-size: 17px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.step__text a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(21, 41, 30, .3); }

/* What we paint */
.paint__inner { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(64px, 8vw, 104px); }
.paint__list { list-style: none; margin: 0; padding: 0; }
.paint__list--centred { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(44px, 5vw, 64px) clamp(28px, 3.4vw, 48px); max-width: 1240px; width: 100%; align-self: center; }
.paint__list--centred .paint-item { flex: 1 1 230px; max-width: 380px; align-items: center; text-align: center; gap: 18px; }
.paint__list--centred .paint-item__icon { width: 88px; height: 88px; }
.paint__list--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: clamp(36px, 4vw, 56px) clamp(28px, 3.4vw, 48px); }
.paint__list--grid .paint-item { gap: 16px; }
.paint__list--grid .paint-item__icon { width: 64px; height: 64px; }
.paint-item { display: flex; flex-direction: column; min-width: 0; }
.paint-item__icon { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--panel); color: var(--accent); }
.paint-item__icon svg { display: block; }
.paint-item__title { font-size: clamp(22px, 1.9vw, 26px); line-height: 1.15; }
.paint-item__text { font-size: 16px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.paint-item__text a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(21, 41, 30, .3); }

/* Included list (add-ons) */
.included__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.included-item { display: flex; gap: 20px; align-items: flex-start; padding: 22px 0; border-top: 1px solid var(--line); }
.included-item__icon { flex: none; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--panel); color: var(--accent); }
.included-item__icon svg { display: block; stroke-width: 1.8; }
.included-item__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.included-item__title { font-size: 19px; font-weight: 600; color: var(--ink); }
.included-item__text { font-size: 16.5px; line-height: 1.6; color: var(--text); text-wrap: pretty; }

/* Part of your project (add-ons) */
.fit__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 5vw, 80px); align-items: center; padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(64px, 8vw, 104px); }
.fit__text { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.fit__para { font-size: 17px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.fit__links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 6px; }
.fit__media { display: block; overflow: hidden; aspect-ratio: 4 / 3; max-width: 600px; width: 100%; justify-self: center; border-radius: var(--radius-card); background: var(--panel-2); }
.fit__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* What popcorn removal costs (add-on, id="cost"): cards, worked examples, footnote, then the "why" block under a rule */
.cost { scroll-margin-top: 96px; }
.cost__inner { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px); padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(64px, 8vw, 104px); }
.cost__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(32px, 4vw, 72px); }
.cost .split__aside { max-width: 440px; }
.cost .split__intro { line-height: 1.6; }
.cost__main { display: flex; flex-direction: column; gap: 28px; }
.cost__examples { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.cost-example { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); }
.cost-example__label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cost-example__name { font-size: 17px; font-weight: 600; color: var(--ink); }
.cost-example__rate { font-size: 15px; color: var(--text); }
.cost-example__price { font-size: 20px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.cost__why { gap: clamp(24px, 4vw, 72px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.cost__why-heading { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.cost__why-body { display: flex; flex-direction: column; gap: 16px; }
.cost__para { font-size: 17px; line-height: 1.6; color: var(--text); max-width: 68ch; text-wrap: pretty; }
.cost__para a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(21, 41, 30, .3); }
.cost__para a:hover { text-decoration-color: var(--ink); }