/* WaterDamageGo Homepage Pro v1.1.0 - front-page-only professional upgrade layer.
   Palette matches the site design language: navy #0b2a4a, deep navy #082037,
   aqua #0e7fc4, field #edf4fa, card line #e2edf5.
   v1.1.0 rules (kickers, cause icons, timeline pills, price bar, insurance
   checklist, comparison panels, photo CTA) are at the bottom. */

/* ---------- Top utility bar ---------- */
.wdg-pro-topbar{
    background:#082037;
    color:#fff;
    font-size:14px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    padding:9px 22px;
    position:relative;
    z-index:60;
}
.wdg-pro-topbar-phone{
    color:#fff;
    font-weight:700;
    text-decoration:none;
    transition:color .18s ease;
}
.wdg-pro-topbar-phone:hover{color:#7fd1ff}
@media (max-width:640px){
    .wdg-pro-topbar{flex-direction:column;text-align:center;gap:2px}
}

/* ---------- Live stats bar ---------- */
.wdg-pro-stats{
    background:#fff;
    border:1px solid #e2edf5;
    border-radius:16px;
    box-shadow:0 4px 18px rgba(11,42,74,.07);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    padding:26px 20px;
    margin:26px 0 6px;
    text-align:center;
}
.wdg-pro-stat strong{
    display:block;
    color:#0b2a4a;
    font-size:32px;
    line-height:1.1;
}
.wdg-pro-stat span{
    color:#5a7186;
    font-size:14.5px;
    letter-spacing:.4px;
    font-weight:600;
}
@media (max-width:640px){
    .wdg-pro-stats{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Why-choose-us pillars ---------- */
.wdg-pro-pillars{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}
.wdg-pro-pillar{
    background:#fff;
    border:1px solid #e2edf5;
    border-radius:16px;
    box-shadow:0 4px 18px rgba(11,42,74,.07);
    padding:24px 22px;
}
.wdg-pro-pillar-icon{
    width:52px;
    height:52px;
    background:#e8f4fb;
    border-radius:50%;
    display:grid;
    place-items:center;
    margin-bottom:14px;
}
.wdg-pro-pillar h3{
    color:#0b2a4a;
    font-size:19px;
    margin:0 0 8px;
}
.wdg-pro-pillar p{
    color:#33475c;
    line-height:1.6;
    margin:0;
}
@media (max-width:1000px){
    .wdg-pro-pillars{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
    .wdg-pro-pillars{grid-template-columns:1fr}
}

/* ---------- Popular-area pills ---------- */
.wdg-pro-areas{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    align-items:center;
    margin-top:16px;
}
.wdg-pro-areas-label{
    color:#0b2a4a;
    font-weight:700;
}
.wdg-pro-area-pill{
    background:#eef6fc;
    border:1px solid #d9eaf6;
    color:#1c3d5a;
    font-size:14.5px;
    font-weight:600;
    padding:7px 14px;
    border-radius:999px;
    text-decoration:none;
    transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.wdg-pro-area-pill:hover{
    background:#0b2a4a;
    border-color:#0b2a4a;
    color:#fff;
}

/* ---------- v1.1.0: section kickers ----------
   The .wdg-section prefix outranks Design Pro's .wdg-section p color
   rule. Section H2s are centered in the Foundation and Design Pro
   layers, so the kicker centers with them. */
.wdg-section .wdg-pro-kicker{
    color:#0e7fc4;
    font-size:13px;
    font-weight:800;
    letter-spacing:2.5px;
    text-transform:uppercase;
    text-align:center;
    margin:0 0 6px;
}

/* ---------- v1.1.0: cause icons ---------- */
.wdg-cause h3{display:flex;align-items:center}
.wdg-pro-cause-icon{
    display:inline-grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:50%;
    background:#e8f4fb;
    margin-right:11px;
    flex:0 0 auto;
}

/* ---------- v1.1.0: timeline card heading pills ---------- */
.wdg-card h3{
    display:inline-block;
    background:#e8f4fb;
    color:#0b2a4a;
    padding:5px 13px;
    border-radius:999px;
    font-size:16.5px;
}

/* ---------- v1.1.0: price range bar ---------- */
.wdg-pro-pricebar{margin:22px 0 6px}
.wdg-pro-pricebar-track{
    position:relative;
    height:14px;
    border-radius:999px;
    background:linear-gradient(90deg,#7fd4ff,#0e7fc4 55%,#0b2a4a);
}
.wdg-pro-pricebar-avg{
    position:absolute;
    left:26.5%;
    width:14.7%;
    top:0;
    bottom:0;
    background:rgba(249,87,0,.85);
    border-radius:999px;
    box-shadow:0 0 0 2px rgba(249,87,0,.30);
}
.wdg-pro-pricebar-labels{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:10px;
    font-size:14.5px;
    color:#5a7186;
}
.wdg-pro-pricebar-labels strong{color:#0b2a4a}
.wdg-pro-pricebar-mid{flex:1;text-align:center}
.wdg-pro-pricebar-labels span:last-child{text-align:right}
@media (max-width:640px){
    .wdg-pro-pricebar-labels{font-size:13px}
}

/* ---------- v1.1.0: insurance checklist ---------- */
.wdg-pro-checklist{
    background:#fff;
    border:1px solid #e2edf5;
    border-radius:16px;
    box-shadow:0 4px 18px rgba(11,42,74,.07);
    padding:22px 24px;
    margin:20px 0 6px;
}
.wdg-pro-checklist h3{
    color:#0b2a4a;
    font-size:19px;
    margin:0 0 12px;
}
.wdg-pro-checklist ul{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 26px;
}
.wdg-pro-checklist li{
    position:relative;
    padding-left:30px;
    color:#33475c;
    line-height:1.55;
}
.wdg-pro-checklist li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    width:21px;
    height:21px;
    border-radius:50%;
    background:#e8f4fb;
    color:#0e7fc4;
    font-size:13px;
    font-weight:800;
    text-align:center;
    line-height:21px;
}
@media (max-width:640px){
    .wdg-pro-checklist ul{grid-template-columns:1fr}
}

/* ---------- v1.1.0: water-vs-flood comparison panels ---------- */
.wdg-pro-vs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    margin-top:22px;
}
.wdg-pro-vs-col{
    background:#fff;
    border:1px solid #e2edf5;
    border-top:4px solid #0e7fc4;
    border-radius:16px;
    box-shadow:0 4px 18px rgba(11,42,74,.07);
    padding:22px 24px;
}
.wdg-pro-vs-col.is-flood{border-top-color:#f95700}
.wdg-pro-vs-col h3{
    color:#0b2a4a;
    font-size:19px;
    margin:0 0 12px;
}
.wdg-pro-vs-col ul{
    list-style:none;
    margin:0;
    padding:0;
}
.wdg-pro-vs-col li{
    position:relative;
    padding-left:22px;
    color:#33475c;
    line-height:1.55;
    margin-bottom:8px;
}
.wdg-pro-vs-col li:last-child{margin-bottom:0}
.wdg-pro-vs-col li::before{
    content:"•";
    position:absolute;
    left:2px;
    top:0;
    color:#0e7fc4;
    font-weight:800;
}
.wdg-pro-vs-col.is-flood li::before{color:#f95700}
@media (max-width:700px){
    .wdg-pro-vs{grid-template-columns:1fr}
}

/* ---------- v1.1.0: final CTA photo ----------
   Foundation already gives .wdg-cta a white heading and pale-blue text,
   so the photo version only needs cover sizing on top of the inline
   background-image the filter adds. */
.wdg-cta.wdg-pro-cta-photo{
    background-size:cover;
    background-position:center;
}

@media (prefers-reduced-motion: reduce){
    .wdg-pro-topbar-phone,
    .wdg-pro-area-pill{transition:none}
}

/* v1.1.1: on narrow screens the price bar's center label was squeezed to a
   one-character column (verified live). Let the labels wrap: side labels
   share the first row, the average label takes a full centered row. */
@media (max-width:640px){
    .wdg-pro-pricebar-labels{flex-wrap:wrap;row-gap:5px}
    .wdg-pro-pricebar-labels > span{flex:1 1 40%}
    .wdg-pro-pricebar-labels .wdg-pro-pricebar-mid{order:3;flex:1 1 100%;text-align:center}
}