/* ===========================================================
   VCG Electrical Services - Graviton-style replica
   Ref: demo.bravisthemes.com/graviton (home-electrical-one-page)
   Palette: Yellow #FCCC18 / Red #D80C18 / Near-black #0F141B / White
   Type: Barlow (headings) · DM Sans (body)
   Language: high-contrast yellow+black, square corners,
   "button + arrow-square" CTAs, icon-tab cards, diagonal cuts.
   =========================================================== */

:root {
  --yellow: #FCCC18;
  --yellow-deep: #E9B500;
  --red: #D80C18;
  --red-700: #B00A14;
  --dark: #0F141B;
  --dark-2: #171E27;
  --dark-3: #20272F;
  --ink: #121315;
  --muted: #6B7480;
  --muted-light: #9aa3ad;
  --bg: #FFFFFF;
  --bg-soft: #F6F7F9;
  --line: #E7E9EC;
  --line-dark: rgba(255,255,255,.10);
  --maxw: 1240px;
  --font-head: "Barlow", "Arial Narrow", sans-serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.7; font-size: 16px; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--red); text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

h1,h2,h3,h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.04; font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; }
h1 { font-size: clamp(2.7rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: 1.4rem; }
p { margin-bottom: 1rem; }
.lead { font-size: 1.1rem; color: var(--muted); }

/* eyebrow with bolts */
.eyebrow { font-family: var(--font-head); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: .84rem; color: var(--red); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before, .eyebrow::after { content: "\26A1"; color: var(--yellow); font-size: .9rem; }
.eyebrow.solo::after { display: none; }
.eyebrow.on-dark { color: var(--yellow); }
.eyebrow.center { justify-content: center; }

/* ---------- button + arrow-square ---------- */
.btn { display: inline-flex; align-items: stretch; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; cursor: pointer; border: 0; line-height: 1; }
.btn .txt { display: flex; align-items: center; padding: 0 22px; height: 52px; }
.btn .ico { width: 52px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: transform .14s ease; }
.btn:hover .ico { transform: translateX(2px); }
.btn-red .txt { background: var(--red); color: #fff; } .btn-red .ico { background: var(--ink); color: var(--yellow); } .btn-red:hover .txt { background: var(--red-700); }
.btn-yellow .txt { background: var(--yellow); color: var(--ink); } .btn-yellow .ico { background: var(--ink); color: var(--yellow); } .btn-yellow:hover .txt { background: var(--yellow-deep); }
.btn-dark .txt { background: var(--ink); color: #fff; } .btn-dark .ico { background: var(--yellow); color: var(--ink); }
.btn-white .txt { background: #fff; color: var(--ink); } .btn-white .ico { background: var(--yellow); color: var(--ink); }
.btn-lg .txt { height: 58px; padding: 0 28px; font-size: .96rem; } .btn-lg .ico { width: 58px; }

/* ---------- top utility bar ---------- */
.topbar { background: var(--yellow); color: var(--ink); font-size: .82rem; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 28px; flex-wrap: wrap; }
.topbar .ti { display: flex; align-items: center; gap: 8px; font-weight: 600; font-family: var(--font-head); letter-spacing: .02em; }
.topbar a { color: var(--ink); font-weight: 700; }
.topbar .right { display: flex; gap: 18px; align-items: center; }

/* ---------- contact header ---------- */
.contact-header { background: #fff; border-bottom: 1px solid var(--line); }
.contact-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 28px; }
.contact-header .brand { display: flex; align-items: center; gap: 12px; }
.contact-header .brand img { height: 70px; }
.contact-header .brand .bt { font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; text-transform: uppercase; color: var(--ink); line-height: 1; }
.contact-header .brand .bt small { display: block; font-size: .62rem; letter-spacing: .2em; color: var(--muted); font-weight: 600; margin-top: 4px; }
.contact-header .infos { display: flex; align-items: center; gap: 30px; }
.contact-header .ci { display: flex; gap: 12px; align-items: center; }
.contact-header .ci .ic { width: 44px; height: 44px; background: var(--yellow); display: flex; align-items: center; justify-content: center; }
.contact-header .ci .ic svg { width: 22px; height: 22px; stroke: var(--ink); stroke-width: 2; fill: none; }
.contact-header .ci .t { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.contact-header .ci .v { font-family: var(--font-head); font-weight: 700; color: var(--ink); font-size: .98rem; }
.contact-header .openbox { background: var(--ink); color: #fff; display: flex; align-items: center; gap: 12px; padding: 12px 20px; }
.contact-header .openbox .ic { color: var(--yellow); font-size: 1.5rem; }
.contact-header .openbox .t { font-size: .7rem; color: var(--yellow); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.contact-header .openbox .v { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; }

/* ---------- nav ---------- */
.site-nav { position: sticky; top: 0; z-index: 50; background: var(--dark); border-top: 3px solid var(--yellow); }
.site-nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 28px; }
.site-nav .links { display: flex; align-items: center; gap: 0; }
.site-nav .links a { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; color: #fff; padding: 20px 18px; position: relative; }
.site-nav .links a:hover, .site-nav .links a.active { color: var(--yellow); }
.site-nav .navcta { display: flex; align-items: center; }
.menu-toggle { display: none; background: var(--yellow); border: 0; cursor: pointer; flex-direction: column; gap: 4px; padding: 12px; }
.menu-toggle span { width: 24px; height: 3px; background: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--dark); color: #fff; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,20,27,.92) 0%, rgba(15,20,27,.78) 45%, rgba(15,20,27,.45) 100%), url("../img/hero-lineman.jpg"); background-size: cover; background-position: center; }
.hero .wrap { position: relative; padding: 110px 28px 130px; }
.hero .eyebrow { margin-bottom: 22px; }
.hero h1 { color: #fff; max-width: 17ch; }
.hero h1 .y { color: var(--yellow); }
.hero p { color: rgba(255,255,255,.8); max-width: 50ch; margin-top: 20px; font-size: 1.12rem; }
.hero .hero-cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero .hero-rating { margin-top: 22px; display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.85); font-family: var(--font-head); text-transform: uppercase; font-size: .92rem; letter-spacing: .04em; }
.hero .hero-rating .stars { color: var(--yellow); letter-spacing: 2px; font-size: 1.05rem; }
.hero .hero-rating strong { color: #fff; }

/* ---------- quote + welcome row ---------- */
.qrow { background: var(--bg); position: relative; margin-top: -70px; z-index: 5; }
.qrow .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 0; align-items: stretch; }
.welcome { background: #fff; border: 1px solid var(--line); border-right: 0; padding: 50px 48px; display: flex; flex-direction: column; justify-content: center; }
.welcome .eyebrow { margin-bottom: 16px; }
.welcome h2 { margin-bottom: 16px; }
.welcome p { color: var(--muted); }
.welcome .wfig { margin-top: 26px; }
.welcome .wfig img { width: 100%; height: auto; display: block; }
.quote-card { background: var(--dark); color: #fff; }
.quote-card .qhead { background: var(--yellow); color: var(--ink); font-family: var(--font-head); font-weight: 800; text-transform: uppercase; font-size: 1.35rem; padding: 20px 30px; }
.quote-card .qbody { padding: 28px 30px 34px; }
.quote-card .field { margin-bottom: 14px; }
.quote-card input, .quote-card select, .quote-card textarea { width: 100%; padding: 13px 15px; background: var(--dark-3); border: 1px solid var(--line-dark); color: #fff; font-family: var(--font-body); font-size: .96rem; }
.quote-card input::placeholder, .quote-card textarea::placeholder { color: var(--muted-light); }
.quote-card input:focus, .quote-card select:focus, .quote-card textarea:focus { outline: none; border-color: var(--yellow); }
.quote-card .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hp { position: absolute; left: -9999px; }

/* ---------- sections ---------- */
section.block { padding: 96px 0; }
section.block.soft { background: var(--bg-soft); }
section.block.dark { background: var(--dark); color: #fff; position: relative; overflow: hidden; }
section.block.dark h2, section.block.dark h3 { color: #fff; }
.section-head { max-width: 660px; margin-bottom: 50px; }
.section-head.center { margin: 0 auto 50px; text-align: center; }
.section-head .eyebrow { margin-bottom: 16px; }

/* ---------- category cards (icon-tab) ---------- */
.cat-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.cat-card { display: block; color: inherit; border: 1px solid var(--line); background: #fff; padding: 36px 24px 30px; text-align: center; transition: transform .14s ease, box-shadow .14s ease; }
.cat-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(15,20,27,.12); }
.cat-card .tab { width: 76px; height: 76px; margin: 0 auto 20px; background: var(--ink); display: flex; align-items: center; justify-content: center; position: relative; }
.cat-card .tab::before { content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 30px; height: 8px; background: var(--yellow); }
.cat-card .tab svg { width: 38px; height: 38px; stroke: var(--yellow); stroke-width: 1.8; fill: none; }
.cat-card h3 { font-size: 1.2rem; }
.cat-card .ul { width: 30px; height: 3px; background: var(--red); margin: 12px auto 0; }
.cat-card:hover .tab { background: var(--red); }

/* ---------- featured service ---------- */
.featured { display: grid; grid-template-columns: .9fr 1.1fr; gap: 0; margin-top: 56px; border: 1px solid var(--line); background: #fff; }
.featured.flip { grid-template-columns: 1.1fr .9fr; }
.featured.flip .fig { order: 2; }
.featured .fig img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.featured .fc { padding: 44px 46px; }
.featured .fc h3 { font-size: 1.9rem; margin-bottom: 14px; }
.featured .fc p { color: var(--muted); }
.featured .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin: 18px 0 26px; }
.featured .checks li { list-style: none; display: flex; gap: 10px; align-items: center; font-weight: 600; font-family: var(--font-head); text-transform: uppercase; font-size: .86rem; letter-spacing: .02em; }
.featured .checks li::before { content: "\2713"; color: var(--red); font-weight: 800; }

/* ---------- why choose (dark) ---------- */
.why .wrap { position: relative; z-index: 2; }
.why .top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; margin-bottom: 50px; }
.why .stat { text-align: right; }
.why .stat .n { font-family: var(--font-head); font-weight: 800; font-size: 4.5rem; color: var(--yellow); line-height: 1; }
.why .stat .l { color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; font-weight: 600; }
.why p { color: rgba(255,255,255,.72); }
.why-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.why-card { background: var(--dark-2); border: 1px solid var(--line-dark); padding: 30px 26px; }
.why-card .ic { width: 58px; height: 58px; background: var(--yellow); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.why-card .ic svg { width: 28px; height: 28px; stroke: var(--ink); stroke-width: 2; fill: none; }
.why-card h3 { font-size: 1.15rem; color: #fff; margin-bottom: 8px; }
.why-card p { color: rgba(255,255,255,.6); font-size: .92rem; margin: 0; }

/* ---------- offers ---------- */
.offers { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.offer { background: var(--dark); color: #fff; padding: 36px 30px; text-align: center; position: relative; display: flex; flex-direction: column; }
.offer .ribbon { position: absolute; top: 16px; right: 0; background: var(--red); color: #fff; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; padding: 5px 14px; }
.offer h3 { color: var(--yellow); font-size: 2.4rem; margin-bottom: 6px; min-height: 2.1em; display: flex; align-items: center; justify-content: center; }
.offer .sub { color: rgba(255,255,255,.65); font-size: .92rem; margin-bottom: 6px; }
.offer .meta { color: var(--muted-light); font-size: .78rem; border-top: 1px solid var(--line-dark); padding-top: 16px; margin-top: 18px; margin-bottom: 26px; }
.offer .btn { margin-top: auto; align-self: center; }
.offer .meta { width: 100%; }

/* ---------- testimonials / reviews ---------- */
.testi { display: grid; grid-template-columns: .9fr 1.1fr; gap: 0; align-items: stretch; border: 1px solid var(--line); }
.testi .fig img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.testi .tc { padding: 50px 48px; background: #fff; }
.testi .tc .eyebrow { margin-bottom: 14px; }
.testi .tc .quote { font-size: 1.18rem; color: var(--ink); line-height: 1.7; margin: 16px 0 24px; }
.testi .stars { display: flex; gap: 4px; margin-bottom: 8px; }
.testi .stars svg { width: 24px; height: 24px; fill: var(--yellow); }
.testi .who { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; }
.testi .who small { display: block; color: var(--muted); font-weight: 500; text-transform: none; font-family: var(--font-body); }

/* ---------- projects gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.proj { position: relative; overflow: hidden; }
.proj img { width: 100%; height: 300px; object-fit: cover; transition: transform .4s ease; }
.proj:hover img { transform: scale(1.06); }
.proj .ov { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; background: linear-gradient(0deg, rgba(15,20,27,.92), transparent); }
.proj .ov .cat { color: var(--yellow); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-family: var(--font-head); }
.proj .ov .ti { color: #fff; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: 1.15rem; }

/* ---------- CTA banner ---------- */
.ctaband { background: var(--dark); color: #fff; position: relative; overflow: hidden; }
.ctaband::after { content: ""; position: absolute; top: 0; right: 0; width: 38%; height: 100%; background: var(--yellow); clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); opacity: .12; }
.ctaband .wrap { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-top: 64px; padding-bottom: 64px; }
.ctaband .eyebrow { margin-bottom: 12px; }
.ctaband h2 { color: #fff; } .ctaband h2 .y { color: var(--yellow); }
.ctaband .ph { margin-top: 12px; color: rgba(255,255,255,.8); }
.ctaband .ph a { color: var(--yellow); font-weight: 700; }

/* ---------- stats ---------- */
.stats { background: #fff; border-bottom: 1px solid var(--line); }
.stats .wrap { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; padding: 54px 28px; text-align: center; }
.stats .s .n { font-family: var(--font-head); font-weight: 800; font-size: 3rem; color: var(--red); line-height: 1; }
.stats .s .l { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; font-weight: 600; margin-top: 6px; }

/* ---------- brand strip ---------- */
.brandstrip { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.brandstrip .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 34px 28px; flex-wrap: wrap; }
.brandstrip .bl { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; font-size: 1.4rem; color: #b7bcc3; letter-spacing: .02em; }

/* ---------- FAQ ---------- */
.faq { max-width: 880px; margin: 0 auto; }
.faq details { border: 1px solid var(--line); margin-bottom: 14px; background: #fff; }
.faq summary { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: 1.08rem; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 16px; padding: 20px 22px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .qn { background: var(--red); color: #fff; font-size: .8rem; padding: 4px 9px; }
.faq summary .pm { margin-left: auto; color: var(--red); font-size: 1.4rem; }
.faq summary .pm::after { content: "+"; }
.faq details[open] summary .pm::after { content: "\2013"; }
.faq details p { padding: 0 22px 22px; color: var(--muted); margin: 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--dark); color: rgba(255,255,255,.65); padding: 0 0 28px; }
.newsletter { background: var(--dark-2); border-bottom: 1px solid var(--line-dark); }
.newsletter .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 34px 28px; flex-wrap: wrap; }
.newsletter .nl { display: flex; align-items: center; gap: 16px; }
.newsletter .nl .ic { width: 50px; height: 50px; background: var(--yellow); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.newsletter .nl h3 { color: #fff; }
.newsletter form { display: flex; }
.newsletter input { padding: 14px 16px; border: 0; min-width: 280px; font-family: var(--font-body); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 48px; padding: 60px 0 0; }
.site-footer .wrap { }
.site-footer img.flogo { height: 60px; margin-bottom: 18px; }
.site-footer h5 { font-family: var(--font-head); color: #fff; text-transform: uppercase; font-size: 1.05rem; margin-bottom: 18px; position: relative; padding-bottom: 12px; }
.site-footer h5::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: var(--yellow); }
.site-footer a { color: rgba(255,255,255,.65); }
.site-footer a:hover { color: var(--yellow); }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 11px; }
.site-footer .fcontact li { display: flex; gap: 10px; }
.site-footer .fcontact .ic { color: var(--yellow); }
.footer-bottom { border-top: 1px solid var(--line-dark); margin-top: 50px; padding-top: 22px; font-size: .84rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: rgba(255,255,255,.45); }
.lic-note { color: rgba(255,255,255,.45); font-size: .84rem; margin-top: 14px; }

/* ---------- mobile bar ---------- */
.mobile-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; }
.mobile-bar a { flex: 1; }
.mobile-bar a .txt { flex: 1; justify-content: center; }

/* ---------- interior page hero ---------- */
.page-hero { background: var(--dark); color: #fff; padding: 64px 0 60px; border-bottom: 4px solid var(--yellow); position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; top: 0; right: 0; width: 34%; height: 100%; background: var(--yellow); clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%); opacity: .10; }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero .crumb { font-family: var(--font-head); text-transform: uppercase; font-size: .76rem; letter-spacing: .08em; color: rgba(255,255,255,.5); margin-bottom: 16px; }
.page-hero .crumb a { color: var(--yellow); }
.page-hero .eyebrow { margin-bottom: 14px; }
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero h1 .y { color: var(--yellow); }
.page-hero p { color: rgba(255,255,255,.82); max-width: 62ch; margin-top: 16px; font-size: 1.12rem; }
.page-hero .ph-cta { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- prose / standalone checklist (interior pages) ---------- */
.prose { max-width: 860px; }
.prose h2 { margin: 36px 0 14px; }
.prose h3 { margin: 26px 0 10px; }
.prose p { margin-bottom: 1rem; }
.prose ul { margin: 0 0 18px 22px; }
.prose li { margin-bottom: 8px; }
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; list-style: none; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; font-family: var(--font-head); text-transform: uppercase; font-size: .88rem; letter-spacing: .02em; line-height: 1.3; }
.checklist li::before { content: "\2713"; color: var(--red); font-weight: 800; flex: 0 0 auto; }
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.split .fig img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; border: 1px solid var(--line); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } .checklist { grid-template-columns: 1fr; } }

/* ---------- contact grid ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-info h2 { margin-bottom: 8px; }
.contact-info > p { color: var(--muted); margin-top: 24px; font-size: .96rem; }
.ci-item { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ci-item:first-of-type { border-top: 1px solid var(--line); margin-top: 22px; }
.ci-ic { flex: 0 0 auto; width: 48px; height: 48px; background: var(--yellow); display: flex; align-items: center; justify-content: center; }
.ci-ic svg { width: 24px; height: 24px; stroke: var(--ink); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ci-item h4 { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: .76rem; letter-spacing: .1em; color: var(--muted); margin-bottom: 4px; }
.ci-item > div { min-width: 0; }
.ci-item a, .ci-item .ci-v { display: block; font-family: var(--font-head); font-weight: 800; text-transform: uppercase; font-size: 1.12rem; color: var(--ink); overflow-wrap: anywhere; }
.ci-item a:hover { color: var(--red); }

/* ---------- review cards ---------- */
.rev-stars { color: var(--yellow); letter-spacing: 3px; font-size: 1.1rem; margin-bottom: 12px; }
.card .rev-who { margin-top: 16px; font-family: var(--font-head); text-transform: uppercase; font-size: .98rem; color: var(--ink); }
.card .rev-who span { display: block; font-family: var(--font-body); text-transform: none; font-weight: 500; font-size: .8rem; color: var(--muted); margin-top: 2px; }

/* ---------- 4-up project gallery (explicit breakpoints so it always collapses) ---------- */
.gallery.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .gallery.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .gallery.cols-4 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- photo gallery (real project photos) ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.photo-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.photo-grid figure { margin: 0; overflow: hidden; border: 1px solid var(--line); background: #000; }
.photo-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform .4s ease; }
.photo-grid figure:hover img { transform: scale(1.06); }
.photo-grid.tall img { aspect-ratio: 3 / 4; }

/* ---------- authorized dealer band ---------- */
.dealer-band { background: var(--dark); color: #fff; border-top: 3px solid var(--yellow); border-bottom: 3px solid var(--yellow); }
.dealer-band .wrap { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; padding: 0; }
.dealer-band .lbl { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; color: var(--yellow); padding: 22px 28px; display: flex; align-items: center; gap: 10px; }
.dealer-band .brands { display: flex; flex-wrap: wrap; }
.dealer-band .brands span { font-family: var(--font-head); text-transform: uppercase; font-size: 1.5rem; color: #fff; padding: 18px 30px; border-left: 1px solid var(--line-dark); }
.dealer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 780px; margin: 0 auto; }
.dealer-card { background: #fff; border: 1px solid var(--line); padding: 30px 26px; text-align: center; }
@media (max-width: 600px) { .dealer-grid { grid-template-columns: 1fr; } }
.dealer-card .bn { font-family: var(--font-head); text-transform: uppercase; font-size: 1.7rem; color: var(--ink); }
.dealer-card .dealer-logo { height: 56px; width: auto; max-width: 80%; margin: 8px auto 4px; display: block; object-fit: contain; }
.dealer-card .badge { display: inline-block; font-family: var(--font-head); text-transform: uppercase; font-size: .7rem; letter-spacing: .1em; background: var(--yellow); color: var(--ink); padding: 5px 12px; margin-bottom: 14px; }
.dealer-card p { color: var(--muted); font-size: .95rem; margin: 10px 0 0; }
@media (max-width: 900px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .photo-grid, .photo-grid.cols-3 { grid-template-columns: repeat(2, 1fr); gap: 8px; } .dealer-band .lbl { padding: 16px 18px; } .dealer-band .brands span { font-size: 1.2rem; padding: 14px 18px; } }

/* ---------- service / content cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cards.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
/* feature cards (financing & maintenance) */
.card.fcard { background: var(--dark); color: #fff; border: 0; border-top: 4px solid var(--yellow); padding: 36px 32px; display: flex; flex-direction: column; align-items: flex-start; transition: transform .14s ease, box-shadow .14s ease; }
.card.fcard:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(15,20,27,.18); }
.card.fcard .fic { width: 58px; height: 58px; background: var(--yellow); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.card.fcard .fic svg { width: 30px; height: 30px; stroke: var(--ink); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.card.fcard h3 { color: var(--yellow); font-size: 1.5rem; margin-bottom: 10px; }
.card.fcard p { color: rgba(255,255,255,.72); font-size: .96rem; margin: 0 0 22px; }
.card.fcard .btn { margin-top: auto; }
.card { background: #fff; border: 1px solid var(--line); padding: 28px 26px; }
.card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.card > p { color: var(--muted); font-size: .95rem; margin: 0; }
/* image-topped service cards */
.card.svc { padding: 0; overflow: hidden; display: flex; flex-direction: column; color: inherit; transition: transform .14s ease, box-shadow .14s ease; }
.card.svc img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform .4s ease; }
.card.svc:hover img { transform: scale(1.04); }
.card.svc .card-body { padding: 24px 26px 28px; }
.card.svc .card-body h3 { font-size: 1.2rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.card.svc .card-body p { color: var(--muted); font-size: .95rem; margin: 0; }
a.card.svc:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(15,20,27,.12); }
a.card.svc .card-body h3 .ar { color: var(--red); margin-left: auto; transition: transform .14s ease; }
a.card.svc:hover .card-body h3 .ar { transform: translateX(3px); }
/* photo category cards */
.cat-card.photo { padding: 0; overflow: hidden; }
.cat-card.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .4s ease; }
.cat-card.photo:hover img { transform: scale(1.05); }
.cat-card.photo .cc-body { padding: 22px 20px 26px; text-align: center; }
/* brand "we install & service" badge */
.dealer-card .badge.serve { background: var(--ink); color: var(--yellow); }
/* 4-up brand grid (homepage) */
.dealer-grid.cols-4 { grid-template-columns: repeat(4, 1fr); max-width: none; }
@media (max-width: 900px) { .dealer-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dealer-grid.cols-4 { grid-template-columns: 1fr; } }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .contact-header .infos { display: none; }
  .site-nav .links { display: none; }
  .menu-toggle { display: flex; }
  .site-nav .links.open { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--dark); padding: 10px 0; }
  .site-nav .links.open a { padding: 14px 28px; }
  .qrow .wrap { grid-template-columns: 1fr; }
  .welcome { border-right: 1px solid var(--line); }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .cat-cards, .why-cards, .stats .wrap, .cards, .cards.cols-4 { grid-template-columns: 1fr 1fr; }
  .featured, .featured.flip, .testi { grid-template-columns: 1fr; }
  .featured.flip .fig { order: 0; }
  .offers, .gallery { grid-template-columns: 1fr 1fr; }
  .why .top { grid-template-columns: 1fr; } .why .stat { text-align: left; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 640px) {
  body { padding-bottom: 60px; }
  section.block { padding: 64px 0; }
  .wrap { padding: 0 18px; }
  .topbar { font-size: .8rem; }
  .topbar .wrap { justify-content: center; padding: 8px 16px; gap: 4px 14px; }
  .topbar .wrap > .ti { display: none; }
  .topbar .right { gap: 12px; justify-content: center; }
  .topbar .right .ti:not(:last-child) { display: none; }
  .cat-cards, .why-cards, .offers, .gallery, .stats .wrap, .footer-grid, .cards, .cards.cols-4, .cards.cols-2 { grid-template-columns: 1fr; }
  .quote-card .row2 { grid-template-columns: 1fr; }
  .hero .wrap { padding: 80px 18px 100px; }
  .mobile-bar { display: flex; }
  .newsletter input { min-width: 0; width: 100%; }
  .newsletter form { width: 100%; }
}

/* ---------- tasteful scroll reveal + soft hovers ---------- */
/* Default state stays fully visible. The fade-up only plays as an added animation
   when JS marks an element .is-in, so content is never hidden if JS/CSS misbehaves. */
@keyframes vcgRise  { from { opacity: 0; transform: translateY(44px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes vcgLeft  { from { opacity: 0; transform: translateX(-64px); } to { opacity: 1; transform: none; } }
@keyframes vcgRight { from { opacity: 0; transform: translateX(64px); }  to { opacity: 1; transform: none; } }
@keyframes vcgFade  { from { opacity: 0; } to { opacity: 1; } }
.reveal-on .is-in { animation: vcgRise .8s cubic-bezier(.16,.7,.2,1) both; }
.reveal-on .is-in.rv-left  { animation-name: vcgLeft; }
.reveal-on .is-in.rv-right { animation-name: vcgRight; }
.reveal-on .is-in.rv-fade  { animation-name: vcgFade; animation-duration: 1.1s; }
/* contain horizontal slide-ins so they never trigger side-scroll */
.reveal-on .block, .reveal-on .hero, .reveal-on .page-hero, .reveal-on .qrow { overflow-x: clip; }

/* soft hover lifts for cards that lacked one */
.dealer-card { transition: transform .16s ease, box-shadow .16s ease; }
.dealer-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(15,20,27,.10); }
.offer { transition: transform .16s ease, box-shadow .16s ease; }
.offer:hover { transform: translateY(-4px); box-shadow: 0 24px 46px rgba(15,20,27,.24); }

@media (prefers-reduced-motion: reduce) {
  .reveal-on .is-in, .reveal-on .is-in.rv-left, .reveal-on .is-in.rv-right, .reveal-on .is-in.rv-fade { animation: none !important; }
  .dealer-card, .offer, .card.svc, .cat-card, .card.fcard { transition: none !important; }
  .dealer-card:hover, .offer:hover { transform: none !important; }
}