/* =====================================================================
   CONTACT / INQUIRY
   Printed after kit.css, so it builds on the design's existing tokens and
   only adds what the contact page and the inquiry modal need.

   Enqueued by the contact widgets through get_style_depends(), and by
   Ek_Inquiry wherever it prints the modal — the modal lives on pool pages,
   which hold none of those widgets.

   Everything here is prefixed .ct- / .inquiry- so it cannot collide with
   the older .contact-* rules in style.css.

   Ported from the design build at
   themes/usa-pool/HTML/css/contact.css. Keep the two in step.
   ===================================================================== */


/* =====================================================================
   1. THE CONSOLE  —  the page's whole first screen

   Deliberately not a photo banner with the form buried below it. A
   contact page has one job, so the form is the first thing on screen,
   with the ways to reach a human sitting beside it rather than under it.
   ===================================================================== */
.ct-console {
    position: relative;
    isolation: isolate;
    background: #0B1119;
    padding-top: 90px;
    padding-bottom: 90px;
}

.ct-console-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Decorative: the photograph carries no information the copy does not
       already give, so it is alt="" and hidden from screen readers. */
}

/* The scrim. The photograph is a bright daylight aerial, so white type
   needs real cover, not a token tint — heaviest behind the rail on the
   left, easing off towards the right where the form card sits over it
   anyway and the pool can still be seen. The brand glow rides on top of
   the same layer so it tints the photo rather than hiding under it. */
.ct-console::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(760px 760px at 12% -10%, rgba(0, 120, 214, 0.28) 0%, rgba(0, 120, 214, 0) 66%),
        /* Straight left-to-right, not tilted: a tilted axis makes the
           bottom-left corner lighter than the top-left, which is exactly
           where the status pill sits — measured at 2:1 against white. */
        linear-gradient(
            90deg,
            rgba(9, 15, 22, 0.94) 0%,
            rgba(9, 15, 22, 0.90) 36%,
            rgba(9, 15, 22, 0.62) 58%,
            rgba(9, 15, 22, 0.40) 100%
        );
    pointer-events: none;
}

.ct-console-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.02fr;
    gap: 80px;
    align-items: start;
}


/* ---------------------------------------------------------------------
   The rail
   --------------------------------------------------------------------- */
.ct-rail {
    position: sticky;
    top: 120px;
}

.ct-rail .eyebrow {
    color: #71D8F0;
}

.ct-rail h1 {
    color: #FFF;
    font-size: 56px;
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -1px;
    margin: 0 0 20px;
}

.ct-lede {
    color: rgba(255, 255, 255, 0.66);
    font-size: 18px;
    line-height: 30px;
    max-width: 430px;
    margin: 0 0 40px;
}

/* Channels: one row each, separated by hairlines rather than boxed into
   cards — the boxed version is what every contact page already does. */
.ct-channels {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 32px;
}

/* The arrow column collapses to nothing on the rows that are not links. */
.ct-channel {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: inherit;
    text-decoration: none;
}

.ct-channel-icon {
    color: #71D8F0;
    font-size: 17px;
    text-align: center;
}

/* Elementor renders an ICONS control as a bare inline <svg>, which has no
   intrinsic size and no colour of its own — see the longer note in kit.css.
   Each block that draws one has to say so. */
.ct-channel-icon svg.e-font-icon-svg {
    display: inline-block;
    height: 1em;
    width: auto;
    fill: currentColor;
}

.ct-channel-label {
    display: block;
    color: rgba(255, 255, 255, 0.50);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.ct-channel-value {
    display: block;
    color: #FFF;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.35;
    transition: color var(--dur) var(--ease);
}

.ct-channel-note {
    display: block;
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
    line-height: 1.5;
    margin-top: 3px;
}

.ct-channel-arrow {
    color: rgba(255, 255, 255, 0.35);
    font-size: 14px;
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

a.ct-channel:hover .ct-channel-value,
a.ct-channel:focus-visible .ct-channel-value {
    color: #71D8F0;
}

a.ct-channel:hover .ct-channel-arrow,
a.ct-channel:focus-visible .ct-channel-arrow {
    color: #71D8F0;
    transform: translateX(5px);
}

.ct-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border: 1px solid rgba(113, 216, 240, 0.35);
    background: rgba(113, 216, 240, 0.08);
    color: rgba(255, 255, 255, 0.80);
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

.ct-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #71D8F0;
    box-shadow: 0 0 0 0 rgba(113, 216, 240, 0.7);
    animation: ct-pulse 2.4s var(--ease) infinite;
}

@keyframes ct-pulse {
    70%  { box-shadow: 0 0 0 9px rgba(113, 216, 240, 0); }
    100% { box-shadow: 0 0 0 0 rgba(113, 216, 240, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ct-status-dot { animation: none; }
}


/* ---------------------------------------------------------------------
   The form card
   --------------------------------------------------------------------- */
.ct-form-card {
    background: #FFF;
    padding: 44px;
    /* The lift comes from the shadow against the near-black, not from
       overhanging the next section: how far a negative margin actually
       overhangs depends on whether the card or the rail is the taller
       grid item, which changes with the content and the breakpoint. */
    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.42);
}

.ct-form-card h2 {
    color: #0F0F0F;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    margin: 0 0 6px;
}

.ct-form-card > p {
    color: #6B7680;
    font-size: 15px;
    line-height: 26px;
    margin: 0 0 28px;
}


/* =====================================================================
   2. THE FORM
   ===================================================================== */
.ct-topic {
    border: 0;
    padding: 0;
    margin: 0 0 26px;
}

.ct-topic legend {
    display: block;
    color: #0F0F0F;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 0;
    margin-bottom: 12px;
}

.ct-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ct-chip {
    display: inline-flex;
    margin: 0;
    line-height: 1;
}

/* The radio stays in the DOM and keeps the keyboard behaviour; only its
   painting is replaced. */
.ct-chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ct-chip span {
    display: inline-block;
    padding: 11px 16px;
    border: 1px solid #DDE3E8;
    color: #45505A;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.ct-chip:hover span {
    border-color: #0078D6;
    color: #0078D6;
}

.ct-chip input:checked + span {
    background: #0078D6;
    border-color: #0078D6;
    color: #FFF;
}

.ct-chip input:focus-visible + span {
    outline: 2px solid #101012;
    outline-offset: 2px;
}

.ct-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 22px;
}

.ct-field.is-full {
    grid-column: 1 / -1;
}

/* Floating labels: the field reads as a single object at rest and keeps
   its name visible once filled, which a placeholder alone does not. */
.ct-field {
    position: relative;
}

.ct-field input,
.ct-field textarea {
    width: 100%;
    padding: 26px 16px 10px;
    border: 1px solid #DDE3E8;
    border-radius: 0;
    background: #FFF;
    outline: 0;
    color: #0F0F0F;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.ct-field textarea {
    min-height: 118px;
    resize: vertical;
}

.ct-field label {
    position: absolute;
    top: 17px;
    left: 17px;
    color: #7A848C;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    pointer-events: none;
    transition: top var(--dur-fast) var(--ease), font-size var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), letter-spacing var(--dur-fast) var(--ease);
}

.ct-field input:focus,
.ct-field textarea:focus {
    border-color: #0078D6;
    box-shadow: inset 0 -2px 0 #0078D6;
}

/* :placeholder-shown is the "is it empty" test, which is why every field
   carries placeholder=" ". */
.ct-field input:focus + label,
.ct-field input:not(:placeholder-shown) + label,
.ct-field textarea:focus + label,
.ct-field textarea:not(:placeholder-shown) + label {
    top: 9px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #0078D6;
}

.ct-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 22px;
}

.ct-consent input[type="checkbox"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: #0078D6;
    cursor: pointer;
}

.ct-consent label {
    color: #6B7680;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
}

.ct-consent a {
    color: #0078D6;
    text-decoration: underline;
}

.ct-form .default-btn {
    width: 100%;
}

.ct-form-note {
    color: #8A939B;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    margin: 16px 0 0;
}

.ct-form-note a {
    color: #0078D6;
    font-weight: 600;
    text-decoration: none;
}

.ct-form-note a:hover {
    text-decoration: underline;
}


/* =====================================================================
   3. THE POOL REFERENCE

   The point of the whole feature: whatever the visitor was last looking
   at travels with them into the form, so they never have to describe
   which pool they mean. Shared by the form card and the modal, which is
   why it carries its own dark variant further down.
   ===================================================================== */
.inquiry-ref {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 44px 14px 14px;
    border: 1px solid rgba(0, 120, 214, 0.28);
    background: rgba(0, 120, 214, 0.05);
    margin-bottom: 26px;
}

.inquiry-ref[hidden] {
    display: none;
}

.inquiry-ref-img {
    flex: none;
    width: 84px;
    height: 66px;
    object-fit: cover;
    background: #E8EEF3;
}

.inquiry-ref-body {
    flex: 1 1 auto;
    min-width: 0;
}

.inquiry-ref-label {
    display: block;
    color: #0078D6;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.inquiry-ref-name {
    display: block;
    color: #0F0F0F;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
}

.inquiry-ref-meta {
    display: block;
    color: #6B7680;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    margin-top: 2px;
}

.inquiry-ref-link {
    display: inline-block;
    color: #0078D6;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 6px;
}

.inquiry-ref-link:hover {
    text-decoration: underline;
}

/* A bare icon button — the theme reset would otherwise give it a border
   and a crimson hover. */
.inquiry-ref-clear {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #9AA3AB;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.inquiry-ref-clear:hover,
.inquiry-ref-clear:focus {
    background: rgba(0, 0, 0, 0.06);
    color: #0F0F0F;
}


/* =====================================================================
   4. WHAT HAPPENS NEXT

   Ghost numerals on a hairline rule rather than three boxed cards.
   ===================================================================== */
.ct-steps {
    background: #FFF;
    padding-top: 100px;
    padding-bottom: 100px;
}

.ct-steps-head {
    max-width: 620px;
    margin-bottom: 56px;
}

.ct-steps-head h2 {
    color: #0F0F0F;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.15;
    text-align: left;
    margin: 0;
}

.ct-steps-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.ct-step {
    border-top: 2px solid #101012;
    padding-top: 24px;
}

.ct-step-num {
    display: block;
    color: #DDE5EC;
    font-size: 56px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -2px;
    margin-bottom: 14px;
}

.ct-step h3 {
    color: #0F0F0F;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 10px;
}

.ct-step p {
    color: #55606A;
    font-size: 16px;
    line-height: 28px;
    margin: 0;
}


/* =====================================================================
   5. COVERAGE
   ===================================================================== */
.ct-coverage {
    background: #F5F8FA;
}

.ct-coverage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.ct-coverage-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 90px 70px 90px 0;
}

.ct-coverage-copy h2 {
    color: #0F0F0F;
    font-size: 38px;
    font-weight: 500;
    line-height: 1.15;
    text-align: left;
    margin: 0 0 14px;
}

.ct-coverage-copy > p {
    color: #55606A;
    font-size: 17px;
    line-height: 29px;
    margin: 0 0 34px;
    max-width: 470px;
}

.ct-stats {
    display: flex;
    gap: 44px;
    margin-bottom: 36px;
}

.ct-stat strong {
    display: block;
    color: #0078D6;
    font-size: 38px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1px;
}

.ct-stat span {
    display: block;
    color: #6B7680;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 8px;
}

.ct-coverage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ct-coverage-media {
    position: relative;
    min-height: 460px;
}

.ct-coverage-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =====================================================================
   6. FAQ  —  heading on the left, questions on the right
   ===================================================================== */
.ct-faq {
    background: #FFF;
    padding-top: 100px;
    padding-bottom: 100px;
}

.ct-faq-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 70px;
    align-items: start;
}

.ct-faq-aside {
    position: sticky;
    top: 120px;
}

.ct-faq-aside h2 {
    color: #0F0F0F;
    font-size: 38px;
    font-weight: 500;
    line-height: 1.15;
    text-align: left;
    margin: 0 0 16px;
}

.ct-faq-aside p {
    color: #55606A;
    font-size: 16px;
    line-height: 28px;
    margin: 0 0 22px;
    max-width: 340px;
}

.ct-faq-call {
    color: #0F0F0F;
    font-weight: 500;
}

.ct-faq-call a {
    color: #0078D6;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 120, 214, 0.35);
}

.ct-faq-call a:hover {
    border-bottom-color: #0078D6;
}

/* The accordion markup and behaviour are shared with the other pages —
   only the skin changes here. */
.ct-faq .faq-list {
    border-top: 1px solid #E3E8ED;
}

.ct-faq .faq-item {
    border: 0;
    border-bottom: 1px solid #E3E8ED;
    background: none;
    margin: 0;
}

.ct-faq .faq-question {
    width: 100%;
    padding: 26px 40px 26px 0;
    border: 0;
    background: none;
    color: #0F0F0F;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    transition: color var(--dur) var(--ease);
}

.ct-faq .faq-question:hover,
.ct-faq .faq-question:focus {
    background: none;
    color: #0078D6;
}

.ct-faq .faq-item.is-open .faq-question {
    color: #0078D6;
}

.ct-faq .faq-answer p {
    color: #55606A;
    font-size: 16px;
    line-height: 28px;
}


/* =====================================================================
   7. INQUIRY MODAL (pool-model.html)

   Opened by the "Request a quote" button, which is a real link to the
   contact page underneath — so with no JS the visitor still gets there,
   pool reference and all, in the query string.
   ===================================================================== */
.inquiry-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    /* Visibility flips instantly on the way in and only waits on the way
       out. Transitioning it symmetrically leaves the dialog still hidden
       for the first frames, and a hidden element cannot take focus — the
       opening focus() was being dropped on the floor. */
    transition: opacity var(--dur) var(--ease), visibility 0s var(--dur);
}

.inquiry-modal.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur) var(--ease), visibility 0s 0s;
}

.inquiry-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 14, 22, 0.72);
}

.inquiry-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #FFF;
    padding: 40px;
    transform: translateY(18px);
    transition: transform var(--dur) var(--ease);
}

.inquiry-modal.is-open .inquiry-modal-dialog {
    transform: translateY(0);
}

.inquiry-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    min-width: 0;
    padding: 0;
    border: 1px solid #DDE3E8;
    border-radius: 50%;
    background: none;
    color: #45505A;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.inquiry-modal-close:hover,
.inquiry-modal-close:focus {
    background: #F1F5F8;
    border-color: #0078D6;
    color: #0078D6;
}

.inquiry-modal .eyebrow {
    color: #0078D6;
    margin-bottom: 8px;
}

.inquiry-modal h2 {
    color: #0F0F0F;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    margin: 0 0 8px;
}

.inquiry-modal-intro {
    color: #6B7680;
    font-size: 15px;
    line-height: 26px;
    margin: 0 0 24px;
}

.inquiry-modal .inquiry-ref-clear {
    display: none;   /* on the pool's own page the reference is the point */
}

.inquiry-modal-full {
    display: block;
    margin-top: 16px;
    color: #8A939B;
    font-size: 13px;
    text-align: center;
}

.inquiry-modal-full a {
    color: #0078D6;
    font-weight: 600;
    text-decoration: underline;
}

body.inquiry-open {
    overflow: hidden;
}


/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1199px) {
    .ct-console-grid {
        gap: 50px;
    }

    .ct-rail h1 {
        font-size: 46px;
    }

    .ct-form-card {
        padding: 36px 30px;
    }

    .ct-coverage-copy {
        padding: 70px 40px 70px 0;
    }

    .ct-faq-grid {
        gap: 44px;
    }
}

@media (max-width: 991px) {
    .ct-console {
        padding-top: 60px;
        padding-bottom: 80px;
    }

    /* Stacked, the rail runs the full width instead of hugging the left,
       so a left-weighted scrim would leave the copy sitting on daylight. */
    .ct-console::before {
        background:
            radial-gradient(620px 620px at 20% -8%, rgba(0, 120, 214, 0.26) 0%, rgba(0, 120, 214, 0) 66%),
            linear-gradient(180deg, rgba(9, 15, 22, 0.88) 0%, rgba(9, 15, 22, 0.84) 100%);
    }

    .ct-console-grid,
    .ct-coverage-grid,
    .ct-faq-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    /* Stacked, the rail is above the form — pinning it would trap the
       form off-screen. */
    .ct-rail,
    .ct-faq-aside {
        position: static;
    }

    .ct-steps {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .ct-steps-list {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ct-coverage-copy {
        padding: 60px 0 20px;
    }

    .ct-coverage-media {
        min-height: 320px;
    }

    .ct-faq {
        padding-top: 70px;
        padding-bottom: 70px;
    }
}

@media (max-width: 767px) {
    .ct-rail h1 {
        font-size: 34px;
        letter-spacing: -0.5px;
    }

    .ct-lede {
        font-size: 16px;
        line-height: 27px;
        margin-bottom: 30px;
    }

    .ct-channel-value {
        font-size: 18px;
    }

    .ct-form-card {
        padding: 28px 20px;
    }

    .ct-form-card h2 {
        font-size: 24px;
    }

    .ct-fields {
        grid-template-columns: 1fr;
    }

    .ct-steps-head h2,
    .ct-coverage-copy h2,
    .ct-faq-aside h2 {
        font-size: 28px;
    }

    .ct-stats {
        gap: 26px;
    }

    .ct-stat strong {
        font-size: 30px;
    }

    .ct-coverage-actions .default-btn {
        width: 100%;
    }

    .ct-faq .faq-question {
        font-size: 17px;
        padding: 22px 36px 22px 0;
    }

    .inquiry-ref {
        gap: 12px;
        padding: 12px 40px 12px 12px;
    }

    .inquiry-ref-img {
        width: 66px;
        height: 56px;
    }

    .inquiry-ref-name {
        font-size: 17px;
    }

    .inquiry-modal {
        padding: 0;
        align-items: flex-end;
    }

    .inquiry-modal-dialog {
        max-width: 100%;
        max-height: 92vh;
        padding: 30px 20px;
    }

    .inquiry-modal h2 {
        font-size: 25px;
    }
}


/* =====================================================================
   8. SUBMISSION STATES

   The static build's form posted nowhere. This one does, so it needs to
   say what happened.
   ===================================================================== */
.ct-form-status {
    padding: 16px 18px;
    border-left: 3px solid #0078D6;
    background: rgba(0, 120, 214, 0.06);
    color: #0F0F0F;
    font-size: 15px;
    line-height: 25px;
    margin-bottom: 24px;
}

.ct-form-status.is-error {
    border-left-color: #D64500;
    background: rgba(214, 69, 0, 0.06);
}

.ct-form-status[hidden] {
    display: none;
}

/* A field the browser flagged, or one the server rejected. */
.ct-field.has-error input,
.ct-field.has-error textarea {
    border-color: #D64500;
}

.ct-field-error {
    display: block;
    color: #D64500;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 5px;
}

/* Submitting: the button stays put but stops accepting a second press. */
.ct-form.is-sending .default-btn {
    opacity: 0.65;
    pointer-events: none;
}

/* The whole form is replaced by the thank-you on success, so the message
   needs to carry the weight on its own. */
.ct-form-done {
    padding: 30px;
    border: 1px solid rgba(0, 120, 214, 0.28);
    background: rgba(0, 120, 214, 0.05);
}

.ct-form-done h3 {
    color: #0F0F0F;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 8px;
}

.ct-form-done p {
    color: #55606A;
    font-size: 15px;
    line-height: 26px;
    margin: 0;
}

/* The honeypot. Off-screen rather than display:none — some bots skip
   fields they can see are hidden. */
.ct-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}