/* Handyman Chelsea - shared component stylesheet for content pages */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Nunito+Sans:wght@400;600;700;800;900&family=Patrick+Hand&display=swap');

.hcs-page, .hcs-page * { box-sizing: border-box; }

.hcs-page {
  --hcs-green:#074C37; --hcs-green-dark:#043A2A;
  --hcs-coral:#F35B3F; --hcs-coral-dark:#D9472F;
  --hcs-yellow:#EFB51D; --hcs-blue:#A8DCF1;
  --hcs-cream:#FFF9EC; --hcs-paper:#FFFDF6;
  --hcs-ink:#073F30; --hcs-white:#ffffff;
  font-family:"Nunito Sans", Arial, sans-serif;
  color: var(--hcs-ink);
  background: var(--hcs-paper);
  scroll-behavior: smooth;
}
.hcs-page a { color: inherit; text-decoration: none; }
.hcs-page img { display:block; max-width:100%; }
.hcs-wrap { position:relative; width:min(100% - 40px, 1240px); margin-inline:auto; }
#contact { scroll-margin-top: 110px; }

/* Header */
.hcs-header { position:relative; z-index:20; padding:20px 0; background:var(--hcs-cream); border-bottom:1px solid rgba(7,76,55,0.1); }
.hcs-header-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.hcs-brand { display:inline-flex; width:205px; min-height:96px; align-items:center; justify-content:center; padding:13px 20px; border:3px solid var(--hcs-green); border-radius:50%; background:var(--hcs-green); color:var(--hcs-white) !important; text-align:center; transform:rotate(-1deg); box-shadow:0 0 0 4px var(--hcs-cream), 0 0 0 6px var(--hcs-green); }
.hcs-brand-inner { display:block; width:100%; line-height:1; }
.hcs-brand-small { display:block; margin-bottom:4px; color:var(--hcs-white); font-size:13px; font-weight:800; letter-spacing:3px; text-transform:uppercase; }
.hcs-brand-main { display:block; color:var(--hcs-white); font-family:"Anton",Impact,sans-serif; font-size:26px; font-weight:400; letter-spacing:1.8px; text-transform:uppercase; }
.hcs-brand-location { display:block; margin-top:5px; color:var(--hcs-yellow); font-size:13px; font-weight:900; letter-spacing:3px; text-transform:uppercase; }
.hcs-nav { display:flex; align-items:center; gap:clamp(16px,3vw,32px); flex-wrap:wrap; }
.hcs-nav a { position:relative; padding:8px 2px; color:var(--hcs-green); font-size:14px; font-weight:900; letter-spacing:0.4px; text-transform:uppercase; }
.hcs-nav a:hover, .hcs-nav a:focus-visible { color:var(--hcs-coral-dark); }
.hcs-header-phone { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:2px solid var(--hcs-coral); border-radius:16px 16px 16px 4px; background:var(--hcs-coral); color:var(--hcs-white) !important; font-size:14px; font-weight:900; box-shadow:4px 5px 0 rgba(7,76,55,0.13); }
.hcs-header-phone:hover { background:var(--hcs-coral-dark); transform:translateY(-2px); }
.hcs-phone-icon { width:16px; height:16px; fill:currentColor; }

/* Breadcrumb */
.hcs-breadcrumb { padding:14px 0 0; font-size:13px; font-weight:700; color:var(--hcs-green); }
.hcs-breadcrumb a { text-decoration:underline; text-underline-offset:2px; }
.hcs-breadcrumb span { opacity:0.6; margin:0 6px; }

/* Section rhythm */
.hcs-section { padding:64px 0; }
.hcs-section--cream { background:var(--hcs-cream); }
.hcs-section--paper { background:var(--hcs-paper); }
.hcs-eyebrow { display:inline-flex; align-items:center; gap:10px; margin:0 0 16px; color:var(--hcs-green); font-size:13px; font-weight:900; letter-spacing:1.6px; text-transform:uppercase; }
.hcs-eyebrow::before { content:""; width:32px; height:5px; border-radius:100%; background:var(--hcs-yellow); transform:rotate(-3deg); }

/* Page hero (service / area / about pages) */
.hcs-hero { padding:28px 0 56px; position:relative; overflow:hidden; }
.hcs-hero-grid { display:grid; grid-template-columns: minmax(0,1.05fr) minmax(340px,0.8fr); gap:clamp(30px,5vw,64px); align-items:center; }
.hcs-title { margin:0; max-width:680px; font-family:"Anton",Impact,sans-serif; font-size:clamp(38px,5vw,64px); font-weight:400; line-height:0.98; letter-spacing:0.2px; text-transform:uppercase; }
.hcs-title .hcs-accent { color:var(--hcs-coral); }
.hcs-title .hcs-hi { position:relative; display:inline-block; color:var(--hcs-yellow); }
.hcs-lead { max-width:560px; margin:22px 0 0; font-size:clamp(17px,1.6vw,20px); font-weight:800; line-height:1.4; color:var(--hcs-green); }
.hcs-lead strong { color:var(--hcs-coral-dark); font-weight:900; }
.hcs-body { max-width:640px; margin:16px 0 0; font-size:16px; line-height:1.65; }
.hcs-body p { margin:0 0 14px; }
.hcs-hero-visual { position:relative; width:min(100%, 495px); height:590px; margin-inline:auto; border-radius:245px 245px 24px 24px; border:4px solid var(--hcs-green); overflow:hidden; background:linear-gradient(145deg, rgba(168,220,241,0.92), rgba(255,249,236,0.88) 54%, rgba(239,181,29,0.32)); box-shadow:0 0 0 11px var(--hcs-cream), 0 0 0 14px var(--hcs-green); display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; }
.hcs-hero-visual img { width:100%; height:100%; object-fit:cover; object-position:center top; position:absolute; inset:0; }
.hcs-hero-visual span { position:relative; z-index:2; font-weight:800; color:var(--hcs-green); }

/* Benefit chips */
.hcs-chips { display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 0; padding:0; list-style:none; }
.hcs-chips li { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid rgba(7,76,55,0.14); border-radius:100px; background:rgba(255,255,255,0.72); font-size:13px; font-weight:800; color:var(--hcs-green); }
.hcs-check { display:inline-grid; width:17px; height:17px; place-items:center; border-radius:50%; background:var(--hcs-green); color:var(--hcs-white); font-size:11px; font-weight:900; flex:0 0 17px; }

/* Buttons */
.hcs-actions { display:flex; flex-wrap:wrap; align-items:center; gap:13px; margin-top:26px; }
.hcs-btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:54px; border-radius:17px 17px 17px 5px; font-weight:900; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.hcs-btn-primary { padding:12px 18px 12px 22px; background:var(--hcs-coral); color:var(--hcs-white) !important; box-shadow:5px 6px 0 var(--hcs-green); }
.hcs-btn-primary:hover { background:var(--hcs-coral-dark); transform:translateY(-3px); box-shadow:5px 9px 0 var(--hcs-green); }
.hcs-btn-primary span.hcs-script { font-family:"Patrick Hand",cursive; font-size:22px; }
.hcs-btn-arrow { display:inline-grid; width:34px; height:34px; place-items:center; border-radius:50%; background:var(--hcs-green); color:var(--hcs-white); font-size:20px; line-height:1; flex:0 0 34px; }
.hcs-btn-secondary { padding:12px 19px; border:2px solid var(--hcs-green); background:transparent; color:var(--hcs-green) !important; font-size:15px; }
.hcs-btn-secondary:hover { background:var(--hcs-green); color:var(--hcs-white) !important; transform:translateY(-2px); }

/* Card grids */
.hcs-grid { display:grid; gap:22px; margin-top:34px; }
.hcs-grid-2 { grid-template-columns:repeat(2,1fr); }
.hcs-grid-3 { grid-template-columns:repeat(3,1fr); }
.hcs-card { padding:26px; border:1px solid rgba(7,76,55,0.12); border-radius:16px; background:var(--hcs-paper); box-shadow:0 8px 20px rgba(7,76,55,0.05); }
.hcs-card svg { width:40px; height:40px; stroke:var(--hcs-green); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; margin-bottom:12px; }
.hcs-card h3 { margin:0 0 8px; font-family:"Anton",Impact,sans-serif; font-size:19px; font-weight:400; letter-spacing:0.3px; text-transform:uppercase; color:var(--hcs-green); }
.hcs-card p { margin:0; font-size:14.5px; line-height:1.55; }
.hcs-card a.hcs-card-link { display:inline-block; margin-top:12px; font-size:13px; font-weight:900; color:var(--hcs-coral-dark); text-decoration:underline; text-underline-offset:2px; }

/* Trust / stat band */
.hcs-trust { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:32px; }
.hcs-trust-card { padding:22px; text-align:center; border:1px solid rgba(7,76,55,0.12); border-radius:16px; background:var(--hcs-cream); }
.hcs-trust-card svg { width:34px; height:34px; margin:0 auto 10px; stroke:var(--hcs-green); fill:none; stroke-width:2.2; }
.hcs-trust-card strong { display:block; font-family:"Anton",Impact,sans-serif; font-size:28px; color:var(--hcs-coral); }
.hcs-trust-card p { margin:4px 0 0; font-size:13px; font-weight:700; color:var(--hcs-green); }

/* Area badges */
.hcs-areas { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.hcs-areas a { padding:9px 16px; border:1px solid var(--hcs-green); border-radius:100px; font-size:13.5px; font-weight:800; color:var(--hcs-green); }
.hcs-areas a:hover { background:var(--hcs-green); color:var(--hcs-white) !important; }

/* FAQ */
.hcs-faq { max-width:760px; margin-top:30px; }
.hcs-faq details { padding:18px 0; border-bottom:1px solid rgba(7,76,55,0.14); }
.hcs-faq summary { cursor:pointer; list-style:none; font-family:"Anton",Impact,sans-serif; font-size:16px; letter-spacing:0.2px; text-transform:uppercase; color:var(--hcs-green); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.hcs-faq summary::-webkit-details-marker { display:none; }
.hcs-faq summary::after { content:"+"; font-size:22px; color:var(--hcs-coral); flex:0 0 auto; }
.hcs-faq details[open] summary::after { content:"\2212"; }
.hcs-faq p { margin:12px 0 0; font-size:15px; line-height:1.6; }

/* Cross-links */
.hcs-related { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.hcs-related a { padding:10px 16px; border-radius:100px; background:rgba(255,255,255,0.72); border:1px solid rgba(7,76,55,0.14); font-size:13.5px; font-weight:800; color:var(--hcs-green); }
.hcs-related a:hover { color:var(--hcs-coral-dark); }

/* Contact / final CTA band */
.hcs-contact-band { padding:60px 0 70px; background:var(--hcs-green); color:var(--hcs-white); border-radius:28px; margin:0 20px; }
.hcs-contact-band .hcs-wrap { text-align:center; }
.hcs-contact-band h2 { font-family:"Anton",Impact,sans-serif; font-size:clamp(28px,4vw,42px); margin:0 0 14px; text-transform:uppercase; }
.hcs-contact-band p { max-width:560px; margin:0 auto 26px; font-size:16px; opacity:0.92; }
.hcs-contact-links { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-bottom:18px; }
.hcs-contact-links a { display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:100px; background:rgba(255,255,255,0.12); font-weight:800; }
.hcs-contact-links a:hover { background:rgba(255,255,255,0.22); }
.hcs-contact-links svg { width:18px; height:18px; fill:currentColor; }
.hcs-coverage { font-size:13.5px; opacity:0.8; }

/* Footer */
.hcs-footer { padding:30px 0; text-align:center; font-size:13px; color:var(--hcs-green); background:var(--hcs-cream); }

@media (max-width: 900px) {
  .hcs-hero-grid { grid-template-columns:1fr; }
  .hcs-hero-visual { width:min(100%, 380px); height:min(70vw, 460px); order:-1; }
  .hcs-grid-3 { grid-template-columns:1fr 1fr; }
  .hcs-trust { grid-template-columns:1fr; }
  .hcs-header-inner { flex-wrap:wrap; }
  .hcs-nav { order:3; width:100%; display:flex; flex-wrap:wrap; gap:12px 20px; padding-top:14px; border-top:1px solid rgba(7,76,55,0.12); margin-top:14px; justify-content:flex-start; }
}
@media (max-width: 640px) {
  .hcs-grid-2, .hcs-grid-3 { grid-template-columns:1fr; }
  .hcs-contact-band { margin:0 10px; border-radius:20px; padding:44px 0 50px; }
}
