/* Ported from /home/marco-maher/Downloads/HonCar Templetes/services.html.
 * All selectors auto-prefixed with `.hcs-page-services` so the mockup's generic
 * class names (.hero, .btn, .container, etc.) can't bleed into the
 * rest of the site. Re-run /tmp/port_mockups.py to regenerate. */
.hcs-page-services {
  --blue-900:#0A2540;--blue-800:#0F3A6B;--blue-700:#1E5AA8;--blue-600:#2563C9;
  --blue-500:#3B7BE0;--blue-100:#DCE8F5;--blue-50:#EEF4FB;
  --ink:#0A2540;--ink-2:#475569;--ink-3:#748094;--line:#E3E8EF;
  --bg:#FFFFFF;--bg-2:#F7F9FC;--bg-3:#F0F4F9;
  --green:#0F8B4F;--green-50:#E6F4EE;
  --amber:#B45309;--amber-50:#FEF3E0;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --shadow-sm:0 1px 2px rgba(10,37,64,.06);
  --shadow-md:0 4px 14px rgba(10,37,64,.08);
  --shadow-lg:0 18px 40px rgba(10,37,64,.14);
}
.hcs-page-services *, .hcs-page-services *::before, .hcs-page-services *::after {box-sizing:border-box;margin:0;padding:0}
.hcs-page-services {scroll-behavior:smooth;scroll-padding-top:80px}
.hcs-page-services {font-family:var(--body);color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
.hcs-page-services a {color:inherit;text-decoration:none}
.hcs-page-services button {font:inherit;border:0;background:none;cursor:pointer;color:inherit}
.hcs-page-services ul {list-style:none}

.hcs-page-services .container {width:100%;max-width:1200px;margin-inline:auto;padding-inline:20px}
.hcs-page-services .container-narrow {width:100%;max-width:760px;margin-inline:auto;padding-inline:20px}

/* HEADER */
.hcs-page-services .header {background:var(--blue-900);position:sticky;top:0;z-index:50}
.hcs-page-services .header .row {display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.hcs-page-services .brand {display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;color:#fff;letter-spacing:-.01em}
.hcs-page-services .brand-mark {width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;color:#fff}
.hcs-page-services .nav {display:flex;gap:4px;align-items:center;flex:1;margin-left:20px}
.hcs-page-services .nav a {padding:8px 14px;border-radius:8px;font-size:14.5px;font-weight:500;color:rgba(255,255,255,.78);transition:all .15s}
.hcs-page-services .nav a:hover {background:rgba(255,255,255,.08);color:#fff}
.hcs-page-services .nav a.active {background:rgba(255,255,255,.12);color:#fff;font-weight:600}
@media (max-width:780px) {.hcs-page-services .nav {display:none}}
.hcs-page-services .header-cta {display:flex;gap:8px;align-items:center;flex-shrink:0}
.hcs-page-services .btn-text-light {color:rgba(255,255,255,.78);padding:8px 12px;font-weight:500;font-size:14px;transition:color .15s}
.hcs-page-services .btn-text-light:hover {color:#fff}
.hcs-page-services .btn-light {background:#fff;color:var(--blue-900);padding:9px 16px;border-radius:8px;font-weight:600;font-size:14px;transition:all .15s}
.hcs-page-services .btn-light:hover {background:var(--blue-50)}

/* HERO */
.hcs-page-services .hero {
  padding:72px 0 56px;text-align:center;
  background:radial-gradient(800px 400px at 50% 0%, rgba(220,232,245,.5), transparent 70%);
}
.hcs-page-services .tag {display:inline-block;background:var(--blue-50);color:var(--blue-700);font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:999px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:20px}
.hcs-page-services .hero h1 {font-family:var(--serif);font-size:clamp(34px,5vw,52px);font-weight:700;color:var(--blue-900);letter-spacing:-.025em;line-height:1.05;margin-bottom:18px;max-width:680px;margin-inline:auto}
.hcs-page-services .hero p {font-size:clamp(16px,1.8vw,19px);color:var(--ink-2);max-width:560px;margin:0 auto 28px;line-height:1.55}

/* QUICK QUOTE BAR */
.hcs-page-services .quick-quote {max-width:560px;margin:28px auto 0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px;display:flex;gap:6px;box-shadow:0 8px 24px rgba(10,37,64,.06)}
.hcs-page-services .quick-quote input {flex:1;border:0;padding:13px 16px;font-size:15px;font-weight:600;background:transparent;outline:0;text-transform:uppercase;font-family:var(--body)}
.hcs-page-services .quick-quote input::placeholder {color:var(--ink-3);font-weight:500;text-transform:none}
.hcs-page-services .quick-quote button {background:var(--blue-700);color:#fff;padding:13px 22px;border-radius:10px;font-weight:700;font-size:14.5px;display:inline-flex;align-items:center;gap:6px;transition:background .15s}
.hcs-page-services .quick-quote button:hover {background:var(--blue-800)}
@media (max-width:480px) {
  .hcs-page-services .quick-quote {flex-direction:column;padding:8px}
  .hcs-page-services .quick-quote button {width:100%;justify-content:center}
}

/* SERVICES — JUMP BAR */
.hcs-page-services .jump-bar {padding:18px 0;background:var(--bg-2);border-bottom:1px solid var(--line);position:sticky;top:64px;z-index:40}
.hcs-page-services .jump-row {display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.hcs-page-services .jump-row::-webkit-scrollbar {height:0}
.hcs-page-services .jump-btn {
  flex-shrink:0;scroll-snap-align:start;
  padding:8px 14px;border-radius:8px;
  background:#fff;border:1.5px solid var(--line);
  font-size:13.5px;font-weight:600;color:var(--ink-2);
  transition:all .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
}
.hcs-page-services .jump-btn:hover {border-color:var(--blue-500);color:var(--blue-700)}
.hcs-page-services .jump-btn svg {flex-shrink:0;color:var(--ink-3);transition:color .15s}
.hcs-page-services .jump-btn:hover svg {color:var(--blue-700)}

/* SECTION HEADS */
.hcs-page-services .section-head {margin-bottom:36px}
.hcs-page-services .section-head.center {text-align:center}
.hcs-page-services .section-head.center .tag {margin-bottom:14px}
.hcs-page-services .section-head h2 {font-family:var(--serif);font-size:clamp(26px,3.4vw,36px);font-weight:700;color:var(--blue-900);letter-spacing:-.02em;margin-bottom:10px;line-height:1.2}
.hcs-page-services .section-head p {font-size:16px;color:var(--ink-2);max-width:560px;line-height:1.55}
.hcs-page-services .section-head.center p {margin:0 auto}

/* CATEGORY GRID */
.hcs-page-services .cats-section {padding:72px 0;background:#fff}
.hcs-page-services .cat-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px) {.hcs-page-services .cat-grid {grid-template-columns:1fr 1fr}}
@media (max-width:600px) {.hcs-page-services .cat-grid {grid-template-columns:1fr}}
.hcs-page-services .cat-card {
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:24px;display:flex;flex-direction:column;transition:all .2s;cursor:pointer;
  position:relative;overflow:hidden;
}
.hcs-page-services .cat-card::before {
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue-700),var(--blue-500));
  transform:scaleX(0);transform-origin:left;transition:transform .25s;
}
.hcs-page-services .cat-card:hover {border-color:var(--blue-100);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.hcs-page-services .cat-card:hover::before {transform:scaleX(1)}
.hcs-page-services .cat-card .head {display:flex;align-items:center;gap:12px;margin-bottom:14px}
.hcs-page-services .cat-card .ic {
  width:46px;height:46px;border-radius:12px;flex-shrink:0;
  background:var(--blue-50);color:var(--blue-700);
  display:grid;place-items:center;transition:all .2s;
}
.hcs-page-services .cat-card:hover .ic {background:var(--blue-700);color:#fff}
.hcs-page-services .cat-card .head strong {font-size:17px;font-weight:700;color:var(--blue-900);letter-spacing:-.01em;line-height:1.2}
.hcs-page-services .cat-card .head small {font-size:12.5px;color:var(--ink-3);display:block;margin-top:2px;font-weight:500}
.hcs-page-services .cat-card > p {font-size:14px;color:var(--ink-2);line-height:1.55;margin-bottom:14px;flex:1}
.hcs-page-services .cat-card .from-pill {
  display:inline-flex;align-items:center;gap:5px;
  background:var(--bg-2);font-size:11.5px;font-weight:700;color:var(--blue-700);
  padding:4px 10px;border-radius:6px;
  align-self:flex-start;
}
.hcs-page-services .cat-card:hover .from-pill {background:var(--blue-50)}
.hcs-page-services .cat-card .arrow {
  position:absolute;top:22px;right:22px;color:var(--ink-3);
  transition:transform .15s;
}
.hcs-page-services .cat-card:hover .arrow {color:var(--blue-700);transform:translateX(2px)}

/* POPULAR JOBS */
.hcs-page-services .popular-section {padding:72px 0;background:var(--bg-2)}
.hcs-page-services .popular-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:780px) {.hcs-page-services .popular-grid {grid-template-columns:1fr}}
.hcs-page-services .pop-job {
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;
  display:flex;align-items:center;gap:14px;transition:all .15s;cursor:pointer;
}
.hcs-page-services .pop-job:hover {border-color:var(--blue-100);box-shadow:var(--shadow-sm);transform:translateX(2px)}
.hcs-page-services .pop-job .ic {width:38px;height:38px;border-radius:10px;background:var(--blue-50);color:var(--blue-700);display:grid;place-items:center;flex-shrink:0;transition:all .15s}
.hcs-page-services .pop-job:hover .ic {background:var(--blue-700);color:#fff}
.hcs-page-services .pop-job .text {flex:1;min-width:0}
.hcs-page-services .pop-job strong {display:block;font-size:14.5px;font-weight:700;color:var(--blue-900);line-height:1.25}
.hcs-page-services .pop-job small {display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.hcs-page-services .pop-job .price {flex-shrink:0;text-align:right}
.hcs-page-services .pop-job .price strong {font-size:16px;color:var(--blue-900);font-weight:700;letter-spacing:-.01em}
.hcs-page-services .pop-job .price small {font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-top:1px}

/* FULFILMENT OPTIONS */
.hcs-page-services .fulfilment {padding:72px 0;background:#fff}
.hcs-page-services .fulfilment-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:780px) {.hcs-page-services .fulfilment-grid {grid-template-columns:1fr}}
.hcs-page-services .fulfil-card {
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:24px;text-align:center;transition:all .2s;
}
.hcs-page-services .fulfil-card:hover {border-color:var(--blue-100);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.hcs-page-services .fulfil-card .ic {
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg,var(--blue-700),var(--blue-500));
  color:#fff;display:grid;place-items:center;margin:0 auto 14px;
}
.hcs-page-services .fulfil-card h3 {font-size:17px;font-weight:700;color:var(--blue-900);letter-spacing:-.01em;margin-bottom:6px}
.hcs-page-services .fulfil-card p {font-size:14px;color:var(--ink-2);line-height:1.55;margin-bottom:14px}
.hcs-page-services .fulfil-card .meta {font-size:12.5px;color:var(--blue-700);font-weight:600;display:inline-flex;align-items:center;gap:5px}

/* PRICING TABLE */
.hcs-page-services .pricing-section {padding:72px 0;background:var(--bg-2)}
.hcs-page-services .price-table {
  max-width:880px;margin:0 auto;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow-sm);
}
.hcs-page-services .price-row {
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
  align-items:center;gap:14px;padding:16px 22px;
  border-top:1px solid var(--line);
  font-size:14px;color:var(--ink-2);
}
.hcs-page-services .price-row:first-child {border-top:0;background:var(--bg-2);font-weight:700;color:var(--blue-900);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}
.hcs-page-services .price-row .job-name {font-weight:600;color:var(--blue-900);font-size:14.5px}
.hcs-page-services .price-row .job-name small {display:block;font-weight:500;color:var(--ink-3);font-size:12px;margin-top:2px;text-transform:none;letter-spacing:0}
.hcs-page-services .price-row .price-cell {font-weight:700;color:var(--blue-900);font-size:15px;letter-spacing:-.01em}
.hcs-page-services .price-row .time-cell, .hcs-page-services .price-row .warranty-cell {font-size:13px;color:var(--ink-2)}
.hcs-page-services .price-row .warranty-cell {display:inline-flex;align-items:center;gap:4px;color:var(--green);font-weight:600}
@media (max-width:680px) {
  .hcs-page-services .price-row {grid-template-columns:1.4fr .8fr .8fr;font-size:12.5px;padding:12px 14px}
  .hcs-page-services .price-row .warranty-cell {display:none}
  .hcs-page-services .price-row:first-child > div:last-child {display:none}
}
.hcs-page-services .price-disclaimer {max-width:880px;margin:14px auto 0;font-size:12.5px;color:var(--ink-3);text-align:center;line-height:1.5}

/* GUARANTEE BAND */
.hcs-page-services .guarantee {padding:64px 0;background:#fff}
.hcs-page-services .guarantee-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:980px;margin:0 auto}
@media (max-width:780px) {.hcs-page-services .guarantee-grid {grid-template-columns:1fr 1fr}}
.hcs-page-services .guarantee-card {
  text-align:center;padding:24px 16px;
  background:linear-gradient(135deg,var(--blue-50) 0%,#fff 100%);
  border:1px solid var(--blue-100);border-radius:14px;
}
.hcs-page-services .guarantee-card .ic {
  width:44px;height:44px;border-radius:50%;
  background:#fff;color:var(--blue-700);
  display:grid;place-items:center;margin:0 auto 12px;
  border:1px solid var(--blue-100);
}
.hcs-page-services .guarantee-card strong {display:block;font-size:14.5px;font-weight:700;color:var(--blue-900);margin-bottom:4px;letter-spacing:-.01em}
.hcs-page-services .guarantee-card small {font-size:12.5px;color:var(--ink-2);line-height:1.45;display:block}

/* CTA BAND */
.hcs-page-services .cta-band {
  background:linear-gradient(135deg,var(--blue-900) 0%,var(--blue-700) 100%);
  color:#fff;padding:64px 0;text-align:center;position:relative;overflow:hidden;
}
.hcs-page-services .cta-band::before {content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 400px at 80% 30%,rgba(255,255,255,.08),transparent 60%)}
.hcs-page-services .cta-band .container {position:relative;z-index:2}
.hcs-page-services .cta-band h2 {font-family:var(--serif);font-size:clamp(26px,3.2vw,34px);font-weight:700;letter-spacing:-.02em;margin-bottom:10px;line-height:1.2}
.hcs-page-services .cta-band p {font-size:16px;color:rgba(255,255,255,.8);max-width:520px;margin:0 auto 24px}
.hcs-page-services .btn-white {background:#fff;color:var(--blue-900);padding:14px 28px;border-radius:10px;font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:8px;transition:all .15s}
.hcs-page-services .btn-white:hover {background:var(--blue-50);transform:translateY(-1px)}

/* FOOTER */
.hcs-page-services .footer {padding:48px 0 32px;background:#fff;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-3)}
.hcs-page-services .footer .row {display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.hcs-page-services .footer a {color:var(--ink-2);font-weight:500}
.hcs-page-services .footer a:hover {color:var(--blue-700)}
.hcs-page-services .footer-links {display:flex;gap:18px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce) {.hcs-page-services * {animation:none!important;transition:none!important;scroll-behavior:auto!important}}