/* Polish layer, loaded after the page styles. It adds restrained pops of the trade colour, clear
   numbering wherever there is a sequence, icon tiles on service cards and one gentle reveal motion.
   Everything uses the trade tokens (--accent, --accent-soft, --link), so each site keeps its own colour. */

/* Inner pages: a soft wash of the trade colour in the top corner of the main panel, an accent bar
   under the page title, and a short accent rule above each section heading. */
.page-main .panel{background:radial-gradient(560px 280px at 100% 0%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 72%),var(--surface)}
.page-main .panel>h1::after{content:'';display:block;width:48px;height:4px;margin-top:18px;border-radius:99px;background:var(--accent)}
.page-main .panel>h2:not(.sr-only)::before{content:'';display:block;width:24px;height:3px;margin-bottom:14px;border-radius:99px;background:var(--accent)}
.page-main .page-intro{color:var(--ink)}
.page-main .panel ul:not([class])>li::marker{color:var(--accent)}

/* Workflow numbering: a solid trade-colour badge with white figures. */
.process-steps .step>b,.home-page .process-steps .step>b{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;padding:0;border-radius:14px;background:var(--accent);color:#fff;font-family:Sora,sans-serif;font-size:15px;font-weight:700;letter-spacing:.02em;box-shadow:0 10px 20px -10px var(--accent)}

/* Inside a page panel the steps become a vertical timeline joined by a line that draws in. */
.panel .process-steps{grid-template-columns:1fr;gap:0;margin:30px 0 8px}
.panel .process-steps .step{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:20px;align-items:start;border-top:0;padding:0 0 30px}
.panel .process-steps .step>b{grid-row:1/span 2;position:relative;z-index:1}
.panel .process-steps .step h3{margin:9px 0 6px}
.panel .process-steps .step p{grid-column:2;margin:0}
.panel .process-steps .step::after{content:'';position:absolute;left:21px;top:52px;bottom:8px;width:2px;border-radius:2px;background:color-mix(in srgb,var(--accent) 30%,transparent);transform-origin:top;transition:transform .7s cubic-bezier(.2,.7,.2,1) .2s}
.panel .process-steps .step:last-child{padding-bottom:0}
.panel .process-steps .step:last-child::after{display:none}
.motion-ready .panel .process-steps .step.reveal-item:not(.is-visible)::after{transform:scaleY(0)}

/* Plain numbered lists (contractor steps, neighbourhood how-it-works) get matching counters. */
.page-main .panel ol:not(.process-list),.page-main ol.process-list.plain{list-style:none;counter-reset:step;padding-left:0;margin:18px 0 28px}
.page-main .panel ol:not(.process-list)>li,.page-main ol.process-list.plain>li{counter-increment:step;position:relative;min-height:32px;margin:0 0 16px;padding:3px 0 0 48px}
.page-main .panel ol:not(.process-list)>li::before,.page-main ol.process-list.plain>li::before{content:counter(step);position:absolute;left:0;top:0;z-index:1;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--accent);color:#fff;font:700 14px/1 Sora,sans-serif;box-shadow:0 8px 16px -8px var(--accent)}
.page-main .panel ol:not(.process-list)>li:not(:last-child)::after,.page-main ol.process-list.plain>li:not(:last-child)::after{content:'';position:absolute;left:15px;top:36px;bottom:-14px;width:2px;border-radius:2px;background:color-mix(in srgb,var(--accent) 30%,transparent)}

/* The request page's "What happens next" list shows its numbers. */
.request-main .process-list{list-style:none;padding-left:0}
.request-main .process-list li{display:flex;gap:14px;align-items:flex-start}
.request-main .process-list li>span{display:inline-flex;flex:0 0 30px;width:30px;height:30px;align-items:center;justify-content:center;border-radius:10px;background:var(--accent);color:#fff;font:700 13px/1 Sora,sans-serif}

/* Service cards: real cards with an icon tile. Tapping the icon opens the quote chat for that
   service; the title and link open the guide. */
.service-links{gap:16px}
.service-links .svc-card{position:relative;display:flex;flex-direction:column;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 1px 2px rgba(14,26,43,.04);transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,border-color .22s ease}
.service-links .svc-card:hover,.service-links .svc-card:focus-within{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 18px 36px -18px rgba(14,26,43,.28)}
.panel .service-links{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:30px}
.panel .service-links .svc-card{border-top:1px solid var(--line);padding:22px}
.service-links .svc-card h2,.service-links .svc-card h3{margin:0 0 8px}
.service-links .svc-card h2::before{display:none}
.service-links .svc-card h2 a,.service-links .svc-card h3 a{color:var(--ink);text-decoration:none}
.service-links .svc-card h2 a:hover,.service-links .svc-card h3 a:hover{color:var(--link)}
.service-links .svc-card p{flex:1;margin:0 0 16px}
.service-links .svc-card .text-link{align-self:flex-start;color:var(--link);font-weight:600}
.svc-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:16px;border-radius:12px;background:var(--accent-soft);color:var(--accent);transition:background .22s ease,color .22s ease,transform .22s cubic-bezier(.2,.7,.2,1)}
.svc-icon svg{width:24px;height:24px}
a.svc-icon{text-decoration:none}
a.svc-icon:hover,a.svc-icon:focus-visible,.svc-card:hover a.svc-icon{background:var(--accent);color:#fff}
a.svc-icon:hover{transform:scale(1.06)}
.text-link .arrow{display:inline-block;transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.text-link:hover .arrow,.svc-card:hover .text-link .arrow{transform:translateX(4px)}
@media(max-width:900px){.panel .service-links{grid-template-columns:1fr}}

/* Homepage quick picks: tap a symbol to start the chat for that job. */
.quick-picks{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.quick-picks>p{margin:0 0 14px;font-family:Sora,sans-serif;font-weight:600;font-size:16px;color:var(--ink)}
.quick-pick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.quick-pick{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px 10px 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font-size:15px;font-weight:600;line-height:1.3;text-decoration:none;transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .22s ease,box-shadow .22s ease}
.quick-pick .svc-icon{flex:0 0 44px;margin:0}
.quick-pick:hover,.quick-pick:focus-visible{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 14px 28px -16px rgba(14,26,43,.3)}
.quick-pick:hover .svc-icon,.quick-pick:focus-visible .svc-icon{background:var(--accent);color:#fff}
@media(max-width:900px){.quick-pick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-pick{font-size:14px}}

/* One colour story: orange is only for the main buttons; every number, badge, icon and rule uses
   the single trade colour, so the page no longer switches between orange, two blues and back. */
.home-page .step>b{width:44px;min-width:44px;height:44px;padding:0;border-radius:14px;background:var(--accent);color:#fff;font-family:Sora,sans-serif;font-size:15px;font-weight:700;box-shadow:0 10px 20px -10px var(--accent)}
.home-page .contractor-flow li::before{background:var(--accent);color:#fff}
.home-page .faq-grid summary::after{background:var(--accent-soft);color:var(--accent)}
.service-start-message{margin:0 0 18px}

/* One reveal motion: cards and steps rise in, staggered, as they scroll into view. It uses the
   separate translate property so hover lifts (transform) still work. */
.motion-ready .steps>.reveal-item{opacity:0;translate:0 16px;transition:opacity .55s cubic-bezier(.2,.7,.2,1),translate .55s cubic-bezier(.2,.7,.2,1),transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,border-color .22s ease}
.motion-ready .steps>.reveal-item.is-visible{opacity:1;translate:none}
.motion-ready .steps>.delay-1{transition-delay:60ms,60ms,0s,0s,0s}
.motion-ready .steps>.delay-2{transition-delay:120ms,120ms,0s,0s,0s}
.motion-ready .steps>.delay-3{transition-delay:180ms,180ms,0s,0s,0s}
.motion-ready .steps>.delay-4{transition-delay:240ms,240ms,0s,0s,0s}
.motion-ready .steps>.delay-5{transition-delay:300ms,300ms,0s,0s,0s}
.motion-ready .steps>.delay-6{transition-delay:360ms,360ms,0s,0s,0s}

@media(prefers-reduced-motion:reduce){
 .motion-ready .steps>.reveal-item{opacity:1;translate:none;transition:none}
 .panel .process-steps .step::after,.motion-ready .panel .process-steps .step.reveal-item:not(.is-visible)::after{transform:none;transition:none}
 .panel .service-links a.step,.svc-icon,.text-link .arrow{transition:none}
 .panel .service-links a.step:hover,a.step:hover .text-link .arrow{transform:none}
}

/* The chat guide's avatar uses the same trade tile as the logo. */
.chat-avatar{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15.5' r='4'/%3E%3Cpath d='m10.9 12.6 8.6-8.6M16.5 7l2.5 2.5M14 9.5l2 2'/%3E%3C/svg%3E") center/22px 22px no-repeat;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
html[data-sector='plumber'] .chat-avatar{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c3.4 4.1 5.6 7.3 5.6 10.1a5.6 5.6 0 0 1-11.2 0c0-2.8 2.2-6 5.6-10.1z'/%3E%3Cpath d='M9.3 14.2a2.8 2.8 0 0 0 2.4 2.5'/%3E%3C/svg%3E")}
/* Homepage service cards share the icon tile; it sits on its own line above the title. */
.home-page .service-links a.step .svc-icon{display:flex;margin-bottom:14px}
.home-page .service-links a.step h3{margin-top:0}
.home-page .quick-pick,.quick-pick>span:last-child{color:var(--ink);text-decoration:none}