/* vb-service.v1.css: the service hub template (/kitchen-remodel/ first), loaded AFTER css/vb-city.v1.css.
   It reuses the city page design system (#vcp tokens, buttons, sections, reviews, process, projects, videos,
   accordions) and adds only the hub blocks: intro lines, cards, cost table.
   Every rule is scoped to #vcp. Version: VBS_CSS_V in includes/service/shared.php. */

/* 1 hero: none here. The hero is the city hero component and uses css/vb-city.v1.css as is (Bar 2026-09-25). */

/* shared lead paragraph and cards (problem, scope, cost) */
#vcp .vcs-lead{font-size:18px;line-height:1.65;color:var(--ink);max-width:760px;margin:-12px 0 30px}
#vcp .vcs-lead--navy{color:#D9DEE4;margin:0 0 20px}
.vcs-cards{display:grid;gap:18px}
.vcs-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 22px 20px;display:flex;flex-direction:column}
.vcs-card:hover{border-color:var(--gold)}
.vcs-card__n{font-family:Montserrat,"Montserrat Fallback",Arial,sans-serif;font-weight:800;font-size:30px;line-height:1;color:#A48640;margin-bottom:14px}
#vcp .vcs-card p{margin:0 0 12px;font-size:15.5px;line-height:1.7;color:var(--ink)}
#vcp .vcs-card p:last-child{margin-bottom:0}
.vcs-ico{width:40px;height:40px;color:var(--gold-d);margin-bottom:14px}
#vcp .vcs-card__link{margin-top:auto!important;padding-top:4px}
#vcp .vcs-card__link a,#vcp .vcs-more a{font-family:Montserrat,"Montserrat Fallback",Arial,sans-serif!important;font-weight:700;font-size:14.5px;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px}
#vcp .vcs-card__link a::after,#vcp .vcs-more a::after{content:" \2192";color:var(--gold-d)}
#vcp .vcs-card__link a:hover,#vcp .vcs-more a:hover{color:var(--gold-d)}
#vcp .vcs-more{margin:30px 0 0!important}
@media (min-width:600px){.vcs-cards--3,.vcs-cards--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.vcs-cards--3{grid-template-columns:repeat(3,1fr)}.vcs-cards--4{grid-template-columns:repeat(4,1fr)}}

/* 8 cost: the ranges table slot (renders only when the data file sets cost_table) */
.vcs-table{margin:30px 0 0;overflow-x:auto}
.vcs-table table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:14px;font-size:15px}
.vcs-table caption{text-align:left;font-weight:700;color:var(--navy);padding:0 0 10px}
.vcs-table th,.vcs-table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.vcs-table thead th{background:var(--navy);color:#fff}

/* 9 videos: the city row as is; in its own section it needs no top margin */
#vcp .vcs-vids{margin-top:0}

/* 10 areas: inline links on navy */
#vcp .vcs-inline{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
#vcp .vcs-inline:hover{color:var(--gold)}

#vcp .vcs-after{margin:30px 0 0;max-width:860px;font-size:17px;line-height:1.7;color:var(--navy);border-left:3px solid var(--gold);padding-left:16px}
#vcp .vcp-chips--links{margin-bottom:26px}

/* Mobile optimisation pass (Bar's brief 2026-09-25), phones only: 16px card copy and 48px link targets. */
@media (max-width:767px),(pointer:coarse) and (max-height:500px){
  #vcp .vcs-card p{font-size:16px}
  #vcp .vcs-card__link a,#vcp .vcs-more a{display:inline-flex;align-items:center;min-height:48px;border-bottom:0;padding-bottom:0;
    text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:5px}
}
/* Bar's mobile review (2026-09-28), under 768px: card padding about 15% less. */
@media (max-width:767px){
  .vcs-card{padding:20px 19px 17px}
  #vcp .vcs-lead{margin-bottom:24px}
}

/* Index pages (/residential/, Bar 2026-09-29): the city service card in labelled groups, three per row on desktop.
   Card names are <p class="vcp-h3"> (not headings), so they get the heading font here. */
#vcp .vcs-group{display:flex;align-items:center;gap:14px;margin:34px 0 16px;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-d)}
#vcp .vcs-group::after{content:"";flex:1;height:1px;background:var(--line)}
@media (min-width:1000px){.vcs-svcs .vcp-svc{flex-basis:calc((100% - 36px)/3)}}
#vcp .vcp-svc p.vcs-svc__t{font-family:Montserrat,"Montserrat Fallback",Arial,sans-serif!important;font-size:19px;font-weight:700;line-height:1.3;color:var(--navy);margin:0 0 8px}
#vcp .vcs-svc__t a{color:var(--navy)}
#vcp .vcs-svc__t a:hover{color:var(--gold-d)}
#vcp .vcs-also{margin:30px 0 0;font-size:17px;line-height:1.7;color:var(--navy)}
#vcp .vcs-also a{color:var(--navy);font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px}
#vcp .vcs-founder{margin-top:0}
@media (max-width:767px),(pointer:coarse) and (max-height:500px){
  #vcp .vcs-also a{display:inline-block;padding:12px 0}
}
/* Checklist (sections/checklist.php, /finance-application/ "What to have ready"): the hero's gold check on a light section. */
#vcp .vcs-check{list-style:none;margin:0;padding:0;display:grid;gap:14px}
#vcp .vcs-check li{position:relative;padding-left:34px;font-size:17px;line-height:1.6;color:var(--ink)}
#vcp .vcs-check li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F1E2E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
#vcp .vcs-check strong{color:var(--navy)}
/* Application form (sections/apply.php) inside #vcp: keep the form's own type scale, not the page's. */
#vcp .vcs-apply p{margin:0}
#vcp .vcs-apply .vb-fin-intro p{margin:0 auto}
/* Cost section financing line (every hub, 2026-09-29): links /finance-application/. */
#vcp .vcs-fin{margin:12px 0 0;font-size:16px;color:var(--ink)}
#vcp .vcs-fin a{color:var(--navy);font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px}
@media (max-width:767px),(pointer:coarse) and (max-height:500px){#vcp .vcs-fin a{display:inline-block;padding:12px 0}}
/* PROOF (commercial hubs, 2026-09-29): proof cards two across beside one photo; cards alone when there is no photo. */
@media (min-width:600px){.vcs-cards--2{grid-template-columns:repeat(2,1fr)}}
.vcs-proof{display:grid;gap:24px;align-items:start}
@media (min-width:900px){.vcs-proof{grid-template-columns:minmax(0,1fr) 420px}.vcs-proof--solo{grid-template-columns:1fr}}
.vcs-proof__fig{margin:0}
#vcp .vcs-proof__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px}
#vcp .vcs-proof__fig figcaption{font-size:13px;line-height:1.5;color:var(--muted);padding:8px 2px 0}
/* Restoration pages (Bar 2026-09-29): "What to do right now" safety box under the hero (sections/safety.php). */
#vcp .vcs-safety-sec{padding-top:40px;padding-bottom:40px}
#vcp .vcs-safety{border:2px solid #B42318;border-left-width:8px;border-radius:14px;background:#FEF3F2;padding:28px 30px}
#vcp .vcs-safety .vcp-h2{margin-bottom:10px}
#vcp .vcs-safety__eyebrow{color:#B42318}
#vcp .vcs-safety__list{margin:18px 0 0;padding:0 0 0 0;list-style:none;counter-reset:vsafe;display:grid;gap:12px}
#vcp .vcs-safety__list li{counter-increment:vsafe;position:relative;padding-left:44px;font-size:17px;line-height:1.6;color:var(--ink)}
#vcp .vcs-safety__list li::before{content:counter(vsafe);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:#B42318;color:#fff;font:700 15px/30px Montserrat,"Montserrat Fallback",Arial,sans-serif;text-align:center}
#vcp .vcs-safety__list strong{color:var(--navy)}
#vcp .vcs-safety__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:22px}
#vcp .vcs-safety__hours{font-size:15.5px;font-weight:600;color:var(--navy)}
#vcp .vcs-safety__note{margin:16px 0 0;font-size:15px;line-height:1.6;color:var(--ink)}
@media (max-width:599px){
  #vcp .vcs-safety{padding:22px 18px;border-left-width:6px}
  #vcp .vcs-safety__list li{font-size:16px;padding-left:40px}
  #vcp .vcs-safety__cta .vcp-btn{width:100%;text-align:center}
}
/* Division cards on /remodeling-services/ (sections/divisions.php): the service card with a link list and a See all link */
#vcp .vcs-div .vcp-h3{font-size:22px}
#vcp .vcs-div__links{list-style:none;margin:4px 0 0;padding:0 6px;display:grid;gap:2px}
#vcp .vcs-div__links a{display:inline-block;padding:5px 0;color:var(--navy);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
#vcp .vcs-div__links a:hover{color:var(--gold-d)}
#vcp .vcs-div__all{margin:auto 0 0;padding:14px 6px 0}
#vcp .vcs-div__all a{font-weight:700;color:var(--gold-d);text-decoration:none}
#vcp .vcs-div__all a::after{content:" \2192"}
@media (max-width:767px),(pointer:coarse) and (max-height:500px){#vcp .vcs-div__links a{padding:12px 0}#vcp .vcs-div__all a{display:inline-block;padding:12px 0}}