/* Homepage redesign ("new" arm of the A/B test, served at / by functions/index.js).
   Everything is scoped to body.home-v2, so no other page can pick it up. */

body.home-v2 { --hv2-ink: #14201B; --hv2-muted: #3C4D45; --hv2-green: #1F4A3E; --hv2-green-2: #2E6B57; --hv2-sand: #F6F3EE; --hv2-line: #E1E8E3; }

/* ---------- header extras ---------- */
body.home-v2 .hv2-nav-phone a { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--hv2-ink); white-space: nowrap; }
body.home-v2 .hv2-phone-ico { flex: 0 0 auto; color: var(--hv2-green); }

/* Services / Locations dropdowns (desktop; the mobile menu keeps plain links). */
body.home-v2 .hv2-dd { position: relative; }
body.home-v2 .hv2-dd > a { display: inline-flex; align-items: center; gap: 6px; }
body.home-v2 .hv2-chev { transition: transform .25s ease; }
body.home-v2 .hv2-dd.is-open .hv2-chev, body.home-v2 .hv2-dd:hover .hv2-chev, body.home-v2 .hv2-dd:focus-within .hv2-chev { transform: rotate(180deg); }
body.home-v2 .hv2-dd__panel { position: absolute; top: calc(100% + 14px); left: 50%; z-index: 1300; min-width: 220px; padding: 12px; box-sizing: border-box; background: #fff; border: 1px solid var(--hv2-line); border-radius: 16px; box-shadow: 0 20px 44px rgba(20, 32, 27, .14); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; white-space: normal; }
/* invisible bridge so the pointer can travel from the link to the panel */
body.home-v2 .hv2-dd__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
body.home-v2 .hv2-dd.is-open .hv2-dd__panel, body.home-v2 .hv2-dd:hover .hv2-dd__panel, body.home-v2 .hv2-dd:focus-within .hv2-dd__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s ease, transform .2s ease, visibility 0s; }
body.home-v2 .hv2-dd__panel--wide { width: 520px; }
body.home-v2 .hv2-dd__grid, body.home-v2 .hv2-dd__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
body.home-v2 .hv2-dd__grid { grid-template-columns: 1fr 1fr; }
body.home-v2 .site-header .nav-links .hv2-dd__panel li a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; font-size: 15px; font-weight: 700; color: var(--hv2-ink); opacity: 1; white-space: nowrap; }
body.home-v2 .site-header .nav-links .hv2-dd__panel li a:hover, body.home-v2 .site-header .nav-links .hv2-dd__panel li a:focus-visible { background: var(--hv2-sand); color: var(--hv2-green); }
body.home-v2 .hv2-dd__panel small { font-size: 12px; font-weight: 600; color: #4B5B54; }
body.home-v2 .site-header .nav-links a.hv2-dd__all { display: block; margin-top: 8px; padding: 10px 12px 4px; border-top: 1px solid var(--hv2-line); border-radius: 0; font-size: 14px; font-weight: 800; color: var(--hv2-green); background: none; }
@media (max-width: 1024px) {
    body.home-v2 .hv2-dd__panel, body.home-v2 .hv2-chev { display: none; }
}
@media (prefers-reduced-motion: reduce) { body.home-v2 .hv2-dd__panel, body.home-v2 .hv2-chev { transition: none; } }

/* ---------- hero ---------- */
body.home-v2 .hv2-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: "text media" "ticker ticker";
    column-gap: 56px;
    align-items: center;
    padding: 40px 8px 0;
    text-align: left;
    color: var(--hv2-ink);
}
body.home-v2 .hv2-hero__text { grid-area: text; display: flex; flex-direction: column; gap: 18px; }
body.home-v2 .hv2-hero__media { grid-area: media; position: relative; }
body.home-v2 .hv2-hero__ticker { grid-area: ticker; min-width: 0; }
body.home-v2 .hv2-hero__ticker .hero-ticker { margin-top: 36px; }
body.home-v2 .hv2-rating { margin: 0; font-size: 14px; font-weight: 600; color: var(--hv2-muted); }
body.home-v2 .hv2-stars { color: #B7791F; letter-spacing: 2px; margin-right: 6px; }
body.home-v2 .hv2-title { margin: 0; font-size: clamp(34px, 3.7vw, 48px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; color: var(--hv2-ink); }
body.home-v2 .hv2-lead { margin: 0; font-size: 18px; line-height: 1.6; color: var(--hv2-muted); }

/* "See price": step 1 picks service + area, step 2 (revealed) takes phone/email + Eircode. */
body.home-v2 .hv2-finder { display: flex; flex-direction: column; gap: 8px; background: var(--hv2-sand); padding: 8px; border-radius: 16px; }
body.home-v2 .hv2-finder__pick, body.home-v2 .hv2-finder__inputs { display: flex; flex-direction: row; align-items: stretch; gap: 8px; }
body.home-v2 .hv2-finder__field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; background: #fff; border-radius: 10px; padding: 8px 14px; font-size: 12px; font-weight: 600; color: #4B5B54; }
body.home-v2 .hv2-finder__field--city { flex: 0 1 200px; }
body.home-v2 .hv2-finder__field--eircode { flex: 0 1 150px; }
body.home-v2 .hv2-finder select, body.home-v2 .hv2-finder input { width: 100%; min-width: 0; border: 0; padding: 2px 0; background: transparent; font: inherit; font-size: 15px; font-weight: 700; color: var(--hv2-ink); box-shadow: none; }
body.home-v2 .hv2-finder select { cursor: pointer; }
body.home-v2 .hv2-finder input::placeholder { font-weight: 500; color: #7A8A83; }
body.home-v2 .hv2-finder__field:focus-within { outline: 2px solid var(--hv2-green); outline-offset: 0; }
body.home-v2 .hv2-finder select:focus, body.home-v2 .hv2-finder input:focus { outline: none; }
body.home-v2 .hv2-finder__go { flex: 0 0 auto; min-height: 56px; border: 0; border-radius: 10px; padding: 0 22px; background: var(--hv2-green); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .2s; }
body.home-v2 .hv2-finder__go:hover, body.home-v2 .hv2-finder__go:focus-visible { background: #163A30; }
body.home-v2 .hv2-finder__go:disabled { opacity: .7; cursor: wait; }
body.home-v2 .hv2-finder__quote { display: flex; flex-direction: column; gap: 8px; }
body.home-v2 .hv2-finder.is-js:not(.is-open) .hv2-finder__quote { display: none; }
body.home-v2 .hv2-finder.is-open [data-finder-reveal] { display: none; }
body.home-v2 .hv2-finder.is-open .hv2-finder__quote { animation: hv2-reveal .25s ease-out; }
@keyframes hv2-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
body.home-v2 .hv2-finder__price { margin: 4px 6px 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; font-size: 15px; font-weight: 600; color: var(--hv2-muted); }
body.home-v2 .hv2-finder__price strong { font-size: 22px; font-weight: 800; color: var(--hv2-green); }
body.home-v2 .hv2-finder__note { margin: 0 6px; font-size: 14px; font-weight: 600; color: #B42318; }
body.home-v2 .hv2-finder__note:empty { display: none; }
body.home-v2 .hv2-finder__small { margin: 0 6px 4px; font-size: 13px; line-height: 1.5; color: #4B5B54; }
body.home-v2 .hv2-finder__small a { color: var(--hv2-green); font-weight: 600; }

body.home-v2 .hv2-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; font-weight: 600; color: var(--hv2-muted); }
body.home-v2 .hv2-trust li::before { content: "✓"; color: var(--hv2-green-2); font-weight: 800; margin-right: 7px; }

body.home-v2 .hv2-slides { position: relative; height: 440px; border-radius: 24px; overflow: hidden; background: var(--hv2-sand); }
body.home-v2 .hv2-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .8s ease; }
body.home-v2 .hv2-slide.is-active { opacity: 1; }
body.home-v2 .hv2-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.home-v2 .hv2-dots { position: absolute; right: 18px; bottom: 18px; display: flex; gap: 6px; padding: 6px 8px; border-radius: 999px; background: rgba(20, 32, 27, .35); }
body.home-v2 .hv2-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); cursor: pointer; transition: width .3s, background .3s; }
body.home-v2 .hv2-dot[aria-current="true"] { width: 22px; border-radius: 999px; background: #fff; }
body.home-v2 .hv2-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body.home-v2 .hv2-price-card { position: absolute; left: -24px; bottom: 28px; z-index: 2; display: flex; flex-direction: column; gap: 2px; background: #fff; border-radius: 16px; padding: 14px 20px; box-shadow: 0 18px 40px rgba(20, 32, 27, .14); text-decoration: none; transition: opacity .22s, transform .22s; }
body.home-v2 .hv2-price-card.is-swapping { opacity: 0; transform: translateY(6px); }
body.home-v2 .hv2-price-card:hover strong { text-decoration: underline; }
body.home-v2 .hv2-price-card span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4B5B54; }
body.home-v2 .hv2-price-card strong { font-size: 22px; font-weight: 800; color: var(--hv2-green); }

@media (prefers-reduced-motion: reduce) { body.home-v2 .hv2-slide, body.home-v2 .hv2-price-card { transition: none; } }

/* ---------- areas ---------- */
body.home-v2 .hv2-areas { margin: 48px 0 0; background: var(--hv2-sand); border-radius: 24px; padding: 28px 32px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; text-align: left; }
body.home-v2 .hv2-areas__head h2 { margin: 0; font-size: 24px; font-weight: 800; color: var(--hv2-ink); }
body.home-v2 .hv2-areas__head p { margin: 4px 0 0; color: var(--hv2-muted); }
body.home-v2 .hv2-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
body.home-v2 .hv2-chips a { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 16px; background: #fff; border: 1px solid #D9E2DC; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--hv2-green); text-decoration: none; }
body.home-v2 .hv2-chips a:hover { border-color: var(--hv2-green); }
body.home-v2 .hv2-chips .hv2-chips__more { background: transparent; border-color: transparent; font-weight: 800; }
body.home-v2 .hv2-popular { grid-column: 1 / -1; font-size: 14px; color: var(--hv2-muted); }
body.home-v2 .hv2-popular p { margin: 4px 0; }
body.home-v2 .hv2-popular a { color: var(--hv2-green); }

/* ---------- popular services ---------- */
body.home-v2 .hv2-services { margin: 56px 0 24px; text-align: left; }
body.home-v2 .hv2-services__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
body.home-v2 .hv2-services__head h2 { margin: 0; font-size: clamp(26px, 3vw, 34px); font-weight: 800; color: var(--hv2-ink); }
body.home-v2 .hv2-services__head p { margin: 8px 0 0; font-size: 16px; color: var(--hv2-muted); }
body.home-v2 .hv2-filter { display: flex; flex-wrap: wrap; gap: 8px; }
body.home-v2 .hv2-filter button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--hv2-sand); color: var(--hv2-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
body.home-v2 .hv2-filter button[aria-pressed="true"] { background: var(--hv2-green); color: #fff; }
body.home-v2 .hv2-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
body.home-v2 .hv2-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: #fff; border: 1px solid var(--hv2-line); border-radius: 18px; color: var(--hv2-ink); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
body.home-v2 .hv2-card:hover, body.home-v2 .hv2-card:focus-visible { border-color: var(--hv2-green); box-shadow: 0 12px 28px rgba(20, 32, 27, .08); transform: translateY(-2px); }
body.home-v2 .hv2-card[hidden] { display: none; }
body.home-v2 .hv2-card strong { font-size: 18px; font-weight: 700; }
body.home-v2 .hv2-card span { font-size: 14px; line-height: 1.5; color: #4B5B54; }
body.home-v2 .hv2-card em { font-style: normal; font-weight: 800; color: var(--hv2-green); margin-top: auto; }
body.home-v2 .hv2-services__all { margin: 18px 0 0; }
body.home-v2 .hv2-services__all a { font-weight: 700; color: var(--hv2-green); }

/* ---------- WhatsApp: labelled pill on desktop (mobile keeps the bottom contact bar) ---------- */
body.home-v2 .hv2-wa-text { display: none; }
@media (min-width: 992px) {
    body.home-v2 .whatsapp-float { width: auto; height: auto; right: 28px; bottom: 28px; display: inline-flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; border-radius: 999px; background: #0F7A40; color: #fff; text-decoration: none; line-height: 1; box-shadow: 0 12px 30px rgba(15, 23, 42, .25); transition: background .2s, transform .2s; }
    body.home-v2 .whatsapp-float:hover, body.home-v2 .whatsapp-float:focus-visible { background: #0B6534; transform: translateY(-2px); color: #fff; }
    body.home-v2 .whatsapp-float i { margin: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #25D366; color: #fff; font-size: 26px; line-height: 1; }
    body.home-v2 .hv2-wa-text { display: flex; flex-direction: column; gap: 3px; text-align: left; font-size: 15px; font-weight: 700; color: #fff; white-space: nowrap; }
    body.home-v2 .hv2-wa-text small { font-size: 12px; font-weight: 500; }
}

/* ---------- tablet & phone ---------- */
@media (max-width: 991px) {
    body.home-v2 .hv2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.home-v2 .hv2-areas { grid-template-columns: 1fr; }
    body.home-v2 .hv2-chips { justify-content: flex-start; }
}
@media (max-width: 768px) {
    body.home-v2 .hv2-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "ticker" "media"; padding: 12px 0 0; }
    body.home-v2 .hv2-hero__text { gap: 14px; }
    body.home-v2 .hv2-title { font-size: 31px; line-height: 1.12; }
    body.home-v2 .hv2-lead { font-size: 16px; }
    body.home-v2 .hv2-finder__pick, body.home-v2 .hv2-finder__inputs { flex-direction: column; }
    body.home-v2 .hv2-finder__field, body.home-v2 .hv2-finder__field--city, body.home-v2 .hv2-finder__field--eircode { flex: none; }
    body.home-v2 .hv2-finder select, body.home-v2 .hv2-finder input { font-size: 16px; }
    body.home-v2 .hv2-finder__go { min-height: 50px; }
    body.home-v2 .hv2-hero__ticker .hero-ticker { margin-top: 22px; }
    body.home-v2 .hv2-hero__media { margin-top: 22px; }
    body.home-v2 .hv2-slides { height: 220px; border-radius: 18px; }
    body.home-v2 .hv2-dots { right: 10px; bottom: 10px; }
    body.home-v2 .hv2-price-card { left: 12px; bottom: 12px; padding: 10px 14px; }
    body.home-v2 .hv2-price-card strong { font-size: 18px; }
    body.home-v2 .hv2-areas { margin-top: 32px; padding: 20px; border-radius: 18px; }
    body.home-v2 .hv2-services { margin-top: 36px; }
    body.home-v2 .hv2-grid { gap: 10px; }
    body.home-v2 .hv2-card { padding: 14px; border-radius: 16px; }
    body.home-v2 .hv2-card strong { font-size: 15px; }
    body.home-v2 .hv2-card span { display: none; }
}

/* Header fit (Oct 2026 SEO brief 5.1): the phone number and the longer CTA only
   fit beside the full menu on wide screens; below that the phone is icon-only
   (still a labelled tel: link). */
@media (min-width: 1025px) and (max-width: 1599px) {
    body.home-v2 .hv2-nav-phone__num { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    body.home-v2 .hv2-nav-phone a { min-width: 40px; min-height: 40px; justify-content: center; }
}
@media (min-width: 1600px) {
    body.home-v2 .site-header .nav-shell { gap: 16px; }
    body.home-v2 .nav-links { gap: clamp(6px, 0.8vw, 14px); }
}
/* Phones: "Get a quote" instead of "Get a free quote" so "WEPRO" is never cut. */
@media (max-width: 420px) {
    body.home-v2 .hv2-cta-opt { display: none; }
}

/* Tap targets (Oct 2026 SEO brief 5.3): slide dots were 8px buttons. The button
   is now a 24px hit area (WCAG 2.5.8) with the same small dot drawn inside it. */
body.home-v2 .hv2-dots { gap: 0; padding: 2px 6px; }
body.home-v2 .hv2-dot { position: relative; width: 24px; height: 24px; background: transparent; border-radius: 999px; }
body.home-v2 .hv2-dot::before { content: ""; position: absolute; top: 8px; left: 8px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .55); transition: width .3s, background .3s; }
body.home-v2 .hv2-dot[aria-current="true"] { width: 38px; background: transparent; }
body.home-v2 .hv2-dot[aria-current="true"]::before { width: 22px; border-radius: 999px; background: #fff; }
@media (max-width: 768px) {
    body.home-v2 .hv2-finder__field { padding-top: 4px; padding-bottom: 4px; }
    body.home-v2 .hv2-finder select, body.home-v2 .hv2-finder input { min-height: 40px; }
    body.home-v2 .hv2-services__all { display: inline-flex; align-items: center; min-height: 44px; }
}