/* =========================================================================
   Contact Us
   /stylesheets/contact.css

   Everything is scoped under #contact, and every class carries an .egct-
   prefix, so none of it can reach another page. The old page's styling
   hangs off .contactus and .contact-us in layout.css - by using new class
   names none of those rules apply, which is deliberate: several of them
   set fixed pixel widths (width:650px, textarea 646px) that fight any
   responsive layout.

   This block brings its own border-box because egumball.com has no global
   reset - a fresh div on this site computes content-box, so padding would
   otherwise be added on top of every width.
   ========================================================================= */
#contact .egct-wrap,
#contact .egct-wrap *{ box-sizing: border-box; }

#contact{
    --egct-navy:   #123F72;
    --egct-blue:   #0167CD;
    --egct-steel:  #548CBF;
    --egct-orange: #FF5A00;
    --egct-panel:  #EEF5FC;
    --egct-line:   #D7E5F2;
    --egct-icobg:  #E8F1FB;
    --egct-muted:  #51657E;
    --egct-soft:   #7A7E91;
}

/* White, to match every other page on the site. Measured: about-us, seo,
   faqs and the pricing page all paint nothing at all - transparent body,
   nothing on the content chain - so a tinted field here would have been
   the one page that looked different. The decorative rings went with it
   for the same reason: no other page carries that kind of ornament.

   The cards keep their 1px border and soft shadow, which is what separates
   them from the ground now that both are white. */
#contact .egct-bg{
    background: #fff;
    padding: 44px 0 56px;
    position: relative;
}

/* Matches the 1180px lockup the footer and the rest of the site use, so
   the card edges line up with the footer's vertical rules. */
#contact .container.egct-wrap{
    width: auto;
    max-width: 1180px;
    padding: 0 16px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ---------- page heading ---------- */
#contact .egct-head{ text-align: center; margin: 0 0 34px; }
#contact .egct-head h1{
    margin: 0 0 10px;
    font-size: 46px; font-weight: 900; line-height: 1.05;
    letter-spacing: -.02em; color: var(--egct-navy);
}
#contact .egct-head p{
    margin: 0 auto 16px; max-width: 62ch;
    font-size: 17px; line-height: 1.5; color: var(--egct-muted);
}
#contact .egct-rule{
    display: block; width: 54px; height: 4px; margin: 0 auto;
    background: var(--egct-orange); border-radius: 2px;
}

/* ---------- two columns ---------- */
#contact .egct-grid{
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
    column-gap: 44px;
    /* stretch, so the right column is handed the full height of the row and
       can spread its three cards across it */
    align-items: stretch;
}
/* ...but the form keeps its natural height. Without this it would stretch to
   match the column beside it and end with a band of empty white below the
   send button. */
#contact .egct-form-card{ align-self: start; }
/* A flex column with space-between: the first card's top sits level with the
   top of the form and the last card's bottom with its bottom, and whatever
   height is left over is shared out between them. The gap is the minimum,
   so they never crowd if the form is short. */
#contact .egct-depts{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
}
#contact .egct-dept{ flex: 0 0 auto; }
/* the divider sits in the middle of the gap rather than on either card,
   so neither column's padding has to change to accommodate it */
#contact .egct-depts::before{
    content: ""; position: absolute;
    left: -22px; top: 6px; bottom: 6px;
    width: 1px; background: var(--egct-line);
}

/* ---------- cards ---------- */
/* Slightly stronger than it was over the tinted ground - on white the
   shadow is the only thing giving the card an edge, so it has to work
   a bit harder. */
#contact .egct-card{
    background: #fff;
    border: 1px solid var(--egct-line);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(18,63,114,.09);
}
#contact .egct-form-card{ padding: 30px 32px 32px; }

#contact .egct-card-head{
    display: flex; align-items: flex-start; gap: 18px;
    margin-bottom: 26px;
}
#contact .egct-ico{
    flex: none;
    width: 54px; height: 54px; border-radius: 12px;
    background: var(--egct-icobg); color: var(--egct-blue);
    display: flex; align-items: center; justify-content: center;
}
#contact .egct-ico svg{ width: 26px; height: 26px; display: block; }
#contact .egct-card-head h2{
    margin: 0 0 5px;
    font-size: 25px; font-weight: 800; color: var(--egct-navy);
}
#contact .egct-card-head p{
    margin: 0; max-width: 56ch;
    font-size: 15px; line-height: 1.5; color: var(--egct-muted);
}

/* ---------- the form ---------- */
#contact .egct-fields{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 22px; row-gap: 16px;
}
#contact .egct-f{ min-width: 0; }
#contact .egct-f.egct-wide{ grid-column: 1 / -1; }
#contact .egct-f label{
    display: block; margin-bottom: 6px;
    font-size: 14px; font-weight: 700; color: var(--egct-navy);
}
#contact .egct-f input,
#contact .egct-f textarea{
    width: 100%;
    padding: 0 14px;
    font-family: inherit; font-size: 15.5px; color: var(--egct-navy);
    background: #fff;
    border: 1px solid #C9DDF0; border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#contact .egct-f input{ height: 48px; }
#contact .egct-f textarea{
    height: 122px; padding: 12px 14px;
    line-height: 1.45; resize: vertical;
}
#contact .egct-f input::placeholder,
#contact .egct-f textarea::placeholder{ color: #A9B4C2; }
#contact .egct-f input:focus,
#contact .egct-f textarea:focus{
    outline: none; border-color: var(--egct-blue);
    box-shadow: 0 0 0 3px rgba(1,103,205,.15);
}

/* ---------- captcha row ---------- */
#contact .egct-capwrap{
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    margin-top: 22px;
}
#contact .egct-cap{ min-width: 0; }
#contact .egct-cap > label{
    display: block; margin-bottom: 6px;
    font-size: 14px; font-weight: 700; color: var(--egct-navy);
}
/* Cloudflare Turnstile. The script sets a min-height to match whichever
   size it picked, so the send button does not jump when the widget paints. */
#contact #cf-turnstile{ display: block; }
#contact #cf-turnstile iframe{ max-width: 100%; }

/* The decoy box carries these as an inline style too, so it stays hidden
   even if this file does not load. A visible "Subject" field would look
   like a bug and would get filled in. */
#contact .egct-hp{
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

#contact .egct-send{
    flex: none;
    border: 0; cursor: pointer;
    background: var(--egct-orange); color: #fff;
    font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: .04em;
    padding: 16px 30px; border-radius: 8px;
    display: inline-flex; align-items: center; gap: 12px;
    transition: background-color .15s ease;
}
#contact .egct-send:hover{ background: var(--egct-steel); }
#contact .egct-send:focus-visible{ outline: 3px solid var(--egct-navy); outline-offset: 2px; }
#contact .egct-send svg{ width: 18px; height: 18px; flex: none; }

/* only after a failed attempt, so it does not shout while they type */
#contact .egct-errlist{
    margin: 18px 0 0; padding: 12px 14px;
    border-radius: 8px; background: #FEF2EC; border: 1px solid #F3C4AE;
    color: #9A3412; font-size: 14.5px; line-height: 1.5;
    list-style: none;
}
#contact .egct-errlist li{ margin: 0 0 4px; }
#contact .egct-errlist li:last-child{ margin-bottom: 0; }
#contact .egct-bad{ border-color: #C2410C !important; }

/* ---------- department cards ---------- */
#contact .egct-dept{
    background: #fff;
    border: 1px solid var(--egct-line);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(18,63,114,.09);
    padding: 22px 24px;
    display: grid;
    grid-template-columns: 54px 1fr;
    column-gap: 16px; row-gap: 14px;
    align-items: center;
    position: relative;
}

#contact .egct-num{
    position: absolute; top: -13px; left: 18px;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--egct-orange); color: #fff;
    font-size: 14px; font-weight: 800; letter-spacing: .02em;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(255,90,0,.30);
}
#contact .egct-dept-ico{
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--egct-icobg); color: var(--egct-blue);
    display: flex; align-items: center; justify-content: center;
    margin-top: 12px;
}
#contact .egct-dept-ico svg{ width: 26px; height: 26px; display: block; }
#contact .egct-dept h2{
    grid-column: 2;
    margin: 12px 0 0;
    font-size: 20px; font-weight: 800; color: var(--egct-navy);
}
#contact .egct-lines{
    grid-column: 1 / -1;
    margin: 0; padding: 0; list-style: none;
}
#contact .egct-lines li{
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 9px;
    font-size: 15px; color: var(--egct-navy);
    font-variant-numeric: tabular-nums;
}
#contact .egct-lines li:last-child{ margin-bottom: 0; }
#contact .egct-lines svg{
    flex: none; width: 19px; height: 19px;
    color: var(--egct-blue);
}
#contact .egct-lines a{ color: var(--egct-blue); text-decoration: none; }
#contact .egct-lines a:hover{ color: var(--egct-orange); text-decoration: underline; }
/* the label is for screen readers - the icon carries it visually */
#contact .egct-vh{
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =========================================================================
   Confirmation

   Shown by the page's own script once the server answers OK. The script
   sets display:block inline, and an inline style beats any rule here - so
   the panel must lay out correctly as a block. That is why the card is
   centred with absolute positioning rather than flex.
   ========================================================================= */
#contact #fade{
    display: none;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(11,35,64,.55);
    z-index: 1001;
}
#contact #thankyou_pop{
    display: none;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1002;
    margin: 0; padding: 20px;
}
#contact .egct-thx{
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 40px));
    background: #fff; border-radius: 14px;
    box-shadow: 0 24px 70px rgba(18,63,114,.28);
    padding: 44px 36px 36px;
    text-align: center;
}
#contact .egct-tick{
    width: 74px; height: 74px; border-radius: 50%;
    background: #E8F6EE; color: #1C7C4A;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
}
#contact .egct-tick svg{ width: 34px; height: 34px; display: block; }
#contact .egct-thx h2{
    margin: 0 0 10px;
    font-size: 25px; font-weight: 900; color: var(--egct-navy);
}
#contact .egct-thx p{
    margin: 0 0 24px;
    font-size: 15.5px; line-height: 1.55; color: var(--egct-muted);
}
#contact .egct-thx .egct-close{
    border: 0; cursor: pointer;
    background: var(--egct-blue); color: #fff;
    font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: .04em;
    padding: 13px 32px; border-radius: 8px;
    transition: background-color .15s ease;
}
#contact .egct-thx .egct-close:hover{ background: #01549F; }

/* =========================================================================
   Narrower
   ========================================================================= */
@media only screen and (max-width: 959px){
    #contact .egct-grid{ column-gap: 30px; }
    #contact .egct-depts::before{ left: -15px; }
    #contact .egct-head h1{ font-size: 38px; }
    #contact .egct-form-card{ padding: 26px 24px 28px; }
}

@media only screen and (max-width: 767px){
    /* one column: the divider has nothing to divide, so it goes */
    #contact .egct-grid{ grid-template-columns: 1fr; row-gap: 26px; }
    #contact .egct-depts::before{ display: none; }
    #contact .egct-bg{ padding: 30px 0 40px; }
    #contact .egct-head h1{ font-size: 32px; }
    #contact .egct-head p{ font-size: 15.5px; }
}

@media only screen and (max-width: 479px){
    #contact .egct-form-card{ padding: 22px 18px 24px; }
    /* stacked, because two 48px fields side by side leave no room to type */
    #contact .egct-fields{ grid-template-columns: 1fr; row-gap: 14px; }
    #contact .egct-capwrap{ flex-direction: column; align-items: stretch; }
    #contact .egct-send{ justify-content: center; width: 100%; }
    #contact .egct-dept{ padding: 20px 18px; }
    #contact .egct-head h1{ font-size: 28px; }
}

@media (prefers-reduced-motion: reduce){
    #contact .egct-wrap *{ transition: none !important; }
}