/* ============================================================
   eGumball footer - v1
   Desktop: 3 columns (brand / callback form / contact) over a
   pale skyline. Mobile: badges, form, contact, tagline, bar.
   One markup block drives both - the order changes, not the HTML.
   Everything is scoped under .egf* so nothing leaks into Skeleton.
   ============================================================ */

.egf,
.egf *,
.egf *::before,
.egf *::after{ box-sizing: border-box; }

.egf{
    --navy:   #0e3c8c;
    --ink:    #43566e;
    --muted:  #5c6a7d;
    --blue:   #1f6fe0;
    --orange: #ff5a00;
    --line:   #d9e5f2;
    --field:  #dbe4ef;
    --bar:    #3f6d9f;
    --paper:  #f7fafd;
    --card:   #ecf3fb;

    margin: 0;
    padding: 0;
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--ink);
    line-height: 1.5;
}

/* ---------- the pale upper half ---------- */
.egf-main{
    position: relative;
    overflow: hidden;
    background: var(--paper);
    /* 170px, not 40px. At 40 the bottom of the columns sat 83% of the way down
       the artwork, on the saturated base, where neither the grey nor white was
       readable. At 170 it sits at 51%, which is still clear background. */
    padding: 46px 0 170px;
}

/* Decorative palms + skyline. bg-left.png is used for both halves; the right
   one is mirrored, so the artwork always meets at the centre of the footer.
   background-size:100% auto ties the image width to the element width, so the
   join holds at every screen size.

   When a right-hand file arrives, replace the shared background line below
   with these two - transform:none is what stops the flip:
       .egf-art-l{ background-image: url(/images/bg-left.png); }
       .egf-art-r{ background-image: url(/images/bg-right.png); transform: none; }

   bg-left.png carries clear space inside the canvas - 17px of 1774 on each
   side (0.958%) and 34px of 886 below. Three corrections cancel it without
   touching the file:

   These three numbers are locked together. Pushing the halves further out to
   kill the outer hairline also drags their inner edges away from centre, so
   the width has to grow by about twice whatever the offset grows by. At
   -0.488% the outer edge landed at 0.04px - touching, not overlapping, which
   still rounds to a visible hairline. The pair below overshoots on both sides
   at once.

   width 51.8% instead of 50%  -> each half reaches past centre so the two
     clear strips overlap. 50.98% makes them touch exactly, and a seam that
     only touches still renders as a hairline once the browser rounds each
     element to whole pixels - 51.8% leaves ~4px of real overlap on a phone
     and ~19px on a 1920 desktop.
   left / right -0.8%          -> pulls each half outward past the page edge,
     by ~1px on a phone and ~6px at 1920. .egf-main clips the overhang.
   bottom calc(-0.993vw - 3px) -> pulls the element down by the bottom clear
     space, plus 3px so it overshoots instead of landing flush. The vw part is
     width x 0.4994 x 0.03837 - recompute it if width changes. The flat 3px is
     what clears the rounding: at -0.993vw alone the opaque bottom of the
     artwork landed 0.01px past .egf-main, which still drew a hairline. A px
     term stays 3px at every viewport, where a vw term would shrink on phones.

   If the artwork is ever re-exported with the padding cropped off, set these
   back to width:50%, left/right:0 and bottom:0. */
.egf-art{
    position: absolute;
    bottom: calc(-0.993vw - 3px);
    width: 51.8%;
    height: 82%;
    /* the ?v= is a cache-buster, not part of the filename. Images are served
       with max-age=28800, so anyone who loaded an older version of this file
       keeps it for 8 hours. Bump the number whenever the artwork changes. */
    background: url(/images/bg-left.png?v=2) left bottom / 100% auto no-repeat;
    pointer-events: none;
}
.egf-art-l{ left: -0.8%; }
.egf-art-r{ right: -0.8%; transform: scaleX(-1); }

/* Label text for screen readers only. The four form fields had nothing but a
   placeholder, which a screen reader announces as "edit text, blank" - a
   WCAG 1.3.1 / 3.3.2 failure at Level A. */
.egf-sr{
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.egf-inner{
    position: relative;   /* above the artwork */
    z-index: 1;
    /* 1180 to match .egf-bar-inner. At 972 the three columns only used 68% of a
       1440 page and the badges had to shrink to 45px to fit; 1180 puts it at 82%. */
    max-width: 1180px;
    margin: 0 auto;
    padding-left:  max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));

    display: grid;
    /* column 1 carries the badge row, which is the widest fixed thing here */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, .95fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "logo    form contact"
        "tagline form contact"
        "badges  form contact";
    column-gap: 34px;
}

.egf-logo   { grid-area: logo; }
.egf-tagline{ grid-area: tagline; }
.egf-badges { grid-area: badges; align-self: end; }
.egf-form   { grid-area: form; }
.egf-contact{ grid-area: contact; }

/* the two hairlines between the columns */
.egf-form,
.egf-contact{
    border-left: 1px solid var(--line);
    padding-left: 34px;
}

/* ---------- column 1: logo, tagline, badges ---------- */
.egf-logo img{
    display: block;
    width: 210px;
    max-width: 100%;
    height: auto;
    margin: 0 0 12px;
}
.egf-strap{
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: #2f6cae;
}
.egf-strap em{ font-style: normal; color: #ee5200; }

.egf-rule{
    width: 76px;
    height: 4px;
    margin: 14px 0 0;
    border: 0;
    border-radius: 2px;
    background: var(--orange);
}

.egf-tagline{
    margin: 18px 0 0;
    max-width: 30ch;
    font-size: 17px;
    line-height: 1.55;
}

/* badges */
.egf-badges{ margin-top: 26px; }
.egf-badge-row{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.egf-badge-row li{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 14px;
}
.egf-badge-row li:first-child{ padding-left: 0; }
.egf-badge-row li + li{ border-left: 1px solid var(--line); }
/* measured: 92 + 76 + 115 wide plus the padding = 378, which is exactly the
   width column 1 gets at a 1180 container. Do not raise without re-measuring. */
.egf-badge-row img{
    display: block;
    width: auto;
    height: auto;
    max-height: 76px;
    max-width: 100%;
}
.egf-badge-row .egf-bing img{ max-height: 86px; }

.egf-trusted{
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0 0;
    font-size: 17px;
    color: var(--muted);
    white-space: nowrap;
}
.egf-trusted::before,
.egf-trusted::after{
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(31,111,224,0), rgba(31,111,224,.45));
}
.egf-trusted::after{ background: linear-gradient(90deg, rgba(31,111,224,.45), rgba(31,111,224,0)); }

/* ---------- headings shared by the form and contact columns ---------- */
.egf-h{
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--navy);
}
.egf-sub{
    margin: 0 0 20px;
    font-size: 16px;
    color: var(--ink);
}

/* ---------- column 2: the callback form ---------- */
.egf-row{
    display: flex;
    gap: 12px;
    margin: 0 0 12px;
}
.egf-row > *{ flex: 1 1 0; min-width: 0; }

/* font-size as a LONGHAND - 16px is the floor that stops iOS zooming */
.egf-form input[type="text"],
.egf-form input[type="email"],
.egf-form input[type="tel"],
.egf-form textarea{
    display: block;
    width: 100%;
    margin: 0 0 12px;
    padding: 14px 16px;
    border: 1px solid var(--field);
    border-radius: 8px;
    background: #fff;
    color: #1f2430;
    font-size: 16px;
    font-family: inherit;
    line-height: 1.4;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    resize: vertical;
}
.egf-row input{ margin-bottom: 0 !important; }
.egf-form textarea{ min-height: 118px; }
.egf-form input::placeholder,
.egf-form textarea::placeholder{ color: #8e9aab; opacity: 1; }

/* base.css styles input[type="text"]:focus at the same specificity as a bare
   type selector - these carry a class as well, so they win either way */
.egf-form input[type="text"]:focus,
.egf-form input[type="email"]:focus,
.egf-form input[type="tel"]:focus,
.egf-form textarea:focus{
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(31,111,224,.14);
    color: #1f2430;
}

/* base.css paints every <button> grey with a gradient, an 11px bold face and a
   white text-shadow, and its :hover/:active outrank a bare class. All overridden. */
.egf-send{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    margin: 4px 0 0;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    background: var(--orange);
    color: #fff;
    /* white on #ff5a00 is 3.13:1. At 19px/700 it counts as large text, which
       needs 3:1, so it passes. At 18px/600 it was being judged against 4.5:1. */
    font-size: 19px;
    font-family: inherit;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-shadow: none;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.egf-send:hover,
.egf-send:focus,
.egf-send:active{ border: 0; color: #fff; text-shadow: none; }
.egf-send:hover{ background: #ea5200; }
.egf-send:active{ background: #d84c00; }
.egf-send:focus-visible{ outline: 2px solid var(--navy); outline-offset: 3px; }
.egf-send svg{
    flex: 0 0 auto;
    width: 20px; height: 20px;
    fill: none; stroke: currentColor;
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

.egf-note{
    margin: 12px 0 0;
    font-size: 15px;
    text-align: center;
    color: var(--muted);
}

/* the captcha block is revealed by the site's own jQuery on #cbMessage focus */
#spanCaptcha{ margin: 2px 0 8px; font-size: 14px; color: var(--muted); }
#divCaptcha img{ display: block; border-radius: 6px; }
#divPinPass input{
    margin: 0 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--field);
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    width: 150px;
}

/* ---------- column 3: contact + social ---------- */
.egf-clist{
    margin: 0;
    padding: 0;
    list-style: none;
}
.egf-clist li{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 16px;
    padding: 0;
}
.egf-clist svg{
    flex: 0 0 auto;
    width: 26px; height: 26px;
    margin-top: 1px;
    fill: var(--blue);
}
.egf-clist a,
.egf-clist span{
    font-size: 17px;
    line-height: 1.35;
    color: var(--ink);
    text-decoration: none;
    background: none;
}
.egf-clist a:hover{ color: var(--blue); text-decoration: underline; }
.egf-clist small{
    display: block;
    font-size: 15px;
    color: var(--muted);
}

.egf-hr{
    height: 1px;
    margin: 22px 0;
    border: 0;
    background: var(--line);
}

.egf-social{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}
.egf-social li{ margin: 0; padding: 0; }
.egf-social a{
    display: block;
    width: 46px; height: 46px;
    border-radius: 50%;
    overflow: hidden;
    background: none;
    text-decoration: none;
}
.egf-social svg{ display: block; width: 46px; height: 46px; }
.egf-social a:hover{ opacity: .85; }
.egf-social a:focus-visible{ outline: 2px solid var(--navy); outline-offset: 3px; }

/* ---------- the blue bar ---------- */
.egf-bar{
    background: var(--bar);
    color: #fff;
    padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px));
}
/* grid, not flex: space-between let the legal group wrap to its own line as
   soon as the three groups got close. auto/1fr/auto pins them left, centre,
   right and keeps the nav centred no matter how wide the copyright runs. */
.egf-bar-inner{
    max-width: 1180px;
    margin: 0 auto;
    padding-left:  max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px 20px;
}
.egf-copy { justify-self: start; }
.egf-nav  { justify-self: center; }
.egf-legal{ justify-self: end; }
.egf-fineprint{ grid-column: 1 / -1; }
.egf-copy{
    margin: 0;
    flex: 0 0 auto;
    font-size: 13px;
    color: #eaf1fa;
}
.egf-nav,
.egf-legal{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.egf-nav li,
.egf-legal li{ margin: 0; padding: 0; }
.egf-nav a,
.egf-legal a{
    display: block;
    padding: 2px 14px;
    color: #fff;
    text-decoration: none;
    background: none;
}
/* measured: copyright 245 + nav 544 + legal 258 = 1047 inside 1180, one line */
.egf-nav a  { padding: 2px 9px; font-size: 14.5px; }
.egf-legal a{ padding: 2px 8px; font-size: 13px; color: #eaf1fa; }
.egf-nav a:hover,
.egf-legal a:hover{ text-decoration: underline; color: #fff; }
.egf-nav li + li,
.egf-legal li + li{ border-left: 1px solid rgba(255,255,255,.45); }

/* Google Partner Program disclaimer - required wording, keep it */
.egf-fineprint{
    flex: 0 0 100%;
    order: 9;
    max-width: 1000px;
    margin: 14px auto 0;
    padding-top: 13px;
    border-top: 1px solid rgba(255,255,255,.22);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: #eaf1fa;
}
.egf-fineprint a{
    color: #eaf2fb;
    text-decoration: underline;
    background: none;
}
.egf-fineprint a:hover{ color: #fff; }

/* ============================================================
   Tablet - drop to two columns before anything gets cramped
   ============================================================ */
@media only screen and (max-width: 1023px) and (min-width: 900px){
    .egf-inner{ column-gap: 28px; }
    .egf-form,
    .egf-contact{ padding-left: 28px; }
    .egf-tagline{ font-size: 16px; }
    /* column 1 is only ~310px here, so the badges come down with it */
    .egf-badge-row li{ padding: 0 13px; }
    .egf-badge-row img{ max-height: 58px; }
    .egf-badge-row .egf-bing img{ max-height: 66px; }
}

/* ============================================================
   Mobile - stack, and reorder to badges / form / contact / tagline
   ============================================================ */
@media only screen and (max-width: 899px){
    .egf-main{ padding: 24px 0 0; }

    .egf-inner{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-template-areas:
            "badges"
            "form"
            "contact"
            "tagline";
        column-gap: 0;
        row-gap: 0;
    }

    /* the header already carries the logo - it would only repeat here */
    .egf-logo{ display: none; }

    /* no vertical hairlines once the columns are stacked */
    .egf-form,
    .egf-contact{ border-left: 0; padding-left: 0; }

    /* badges first, centred, with the dividers kept */
    .egf-badges{ margin: 0 0 4px; align-self: auto; }
    .egf-badge-row{ justify-content: center; }
    .egf-badge-row li{ padding: 0 16px; flex: 0 1 auto; }
    .egf-badge-row li:first-child{ padding-left: 16px; }
    .egf-badge-row img{ max-height: 62px; }
    .egf-badge-row .egf-bing img{ max-height: 68px; }
    .egf-trusted{ justify-content: center; margin-top: 14px; font-size: 16px; }

    /* form and contact become filled cards */
    .egf-form,
    .egf-contact{
        margin: 18px 0 0;
        padding: 20px 16px;
        border-radius: 14px;
        background: var(--card);
    }
    .egf-h{ font-size: 23px; }
    .egf-contact .egf-h{ font-size: 18px; margin-bottom: 10px; }
    .egf-send{ min-height: 58px; font-size: 17px; }

    /* Under 400px the two halves are too narrow for the headings and the
       address, so they stack. From 400px up they sit side by side. */
    .egf-contact-grid{
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 16px;
        align-items: start;
    }
    .egf-contact-grid > * + *{
        border-top: 1px solid #ccdcee;
        padding-top: 16px;
    }
    .egf-hr{ display: none; }
    .egf-clist li{ gap: 11px; margin-bottom: 13px; }
    .egf-clist svg{ width: 23px; height: 23px; }
    .egf-clist a, .egf-clist span{ font-size: 16px; }
    .egf-clist .address{ font-size: 15px; }
    .egf-clist small{ font-size: 14px; }
    .egf-social{ gap: 8px; margin-top: 10px; }
    .egf-social a,
    .egf-social svg{ width: 36px; height: 36px; }

    /* the tagline sits last, over the artwork */
    .egf-tagline{
        margin: 26px auto 0;
        padding: 0 8px 96px;
        max-width: 22em;
        text-align: center;
        font-size: 16.5px;
    }
    .egf-tagline .egf-rule{ margin: 16px auto 0; }

    .egf-art{ width: 51.8%; height: 150px; }

    /* the bar stacks: nav, copyright, legal, disclaimer */
    .egf-bar{ padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px)); }
    .egf-bar-inner{
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 10px;
    }
    .egf-copy { order: 2; justify-self: center; font-size: 14px; text-align: center; }
    .egf-nav  { order: 1; justify-self: center; }
    .egf-legal{ order: 3; justify-self: center; }
    .egf-fineprint{ order: 4; margin-top: 10px; font-size: 11.5px; }
    .egf-nav a  { font-size: 15px; padding: 3px 13px; }
    .egf-legal a{ font-size: 13.5px; padding: 3px 10px; }
}

@media only screen and (min-width: 400px) and (max-width: 899px){
    .egf-contact-grid{
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 0;
    }
    .egf-contact-grid > * + *{
        border-top: 0;
        padding-top: 0;
        border-left: 1px solid #ccdcee;
        padding-left: 14px;
    }
}

@media only screen and (max-width: 479px){
    .egf-badge-row li{ padding: 0 10px; }
    .egf-badge-row img{ max-height: 52px; }
    .egf-badge-row .egf-bing img{ max-height: 58px; }
    .egf-contact-grid{ column-gap: 12px; }
    .egf-contact-grid > * + *{ padding-left: 12px; }
    .egf-social a,
    .egf-social svg{ width: 38px; height: 38px; }
    .egf-social{ gap: 8px; }
}

@media (prefers-reduced-motion: reduce){
    .egf-send:active{ transform: none; }
}