/* ============================================================
   INTRO SECTION — two columns: copy + check-lists on the left,
   image with an overlapping badge + stat boxes on the right.

   Fills: local-includes/intro-{townslug}.cfm
   Variables come from service-area.css. Loaded by
   css-service-area.cfm.
   ============================================================ */
.intro-about {
    padding: 70px 0;
}
.intro-about h2 {
    margin-top: 0;
}

/* two-column check list */
.check-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
/* flex row so a wrapped second line indents to the TEXT, never under the
   check mark (Matt, 2026-07-19) */
.check-list li {
    padding: 6px 0;
    color: var(--geo-dark);
    display: flex;
    align-items: flex-start;
}
.check-list li i {
    color: var(--geo-accent);
    margin-right: 8px;
    flex: 0 0 auto;
    /* FA ships line-height:1 — inherit instead, so the check's line box matches
       the text's first line and the glyph sits where the inline version sat */
    line-height: inherit;
}

/* image with an overlapping badge (left inset matches the bottom inset) */
.intro-media {
    position: relative;
    margin-bottom: 30px;
}
.intro-media img {
    width: 100%;
    height: auto;
    border-radius: var(--geo-border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
/* Square on purpose: the badge does NOT take --geo-border-radius (Matt, 2026-07-15).
   It is a solid accent block overlapping the image corner, and it reads as a deliberate
   marker only while its corners stay hard — rounding it turns it into a pill floating on
   the photo. A client who wants round images still gets them; this one element opts out. */
.intro-badge {
    position: absolute;
    left: 25px;
    bottom: 25px;
    background: var(--geo-accent);
    color: var(--geo-accent-text);
    padding: 16px 26px;
}
.intro-badge-num {
    display: block;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
}
.intro-badge-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* stat boxes */
.stat-box {
    border: 1px solid var(--geo-accent);
    border-radius: var(--geo-border-radius);
    text-align: center;
    padding: 22px 10px;
    margin-bottom: 20px;
}
.stat-num {
    display: block;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--geo-accent);
    margin-bottom: 6px;
}
.stat-label {
    display: block;
    font-size: 13px;
    color: var(--geo-dark);
}