/* =========================================================
   FinTruction — Contact page (premium redesign)
   Scope: body.contact-page
   Type system + accent palette mirror the redesigned service
   pages (Manrope body + Lexend display, --qbi-teal accent).
   Hero is a 2-column grid: copy + direct-contact cards on the
   left, active form on the right.
   ========================================================= */

/* ----- Design tokens ----------------------------------------- */
.contact-page {
    --cr-teal:        #009282;
    --cr-bright:      #0EAFA0;
    --cr-deep:        #0A4F4A;
    --cr-dark:        #00293a;
    --cr-darker:      #0E1F2A;
    --cr-text:        #0b2d39;
    --cr-text-soft:   #3b5d66;
    --cr-line:        #cfe9e4;
    --cr-line-soft:   #e6f2f0;
    --cr-soft-bg:     #f6fafa;
    --cr-tint:        #eafbf8;
    --cr-danger:      #dc2626;
    --cr-wa:          #25D366;
    --cr-wa-dark:     #128C7E;
    --cr-shadow-sm:   0 2px 8px rgba(0, 41, 58, 0.06);
    --cr-shadow-md:   0 10px 28px rgba(0, 41, 58, 0.08);
    --cr-shadow-lg:   0 20px 50px rgba(0, 41, 58, 0.12);
    --cr-ring:        0 0 0 4px rgba(0, 146, 130, 0.18);
    --cr-grad-teal:   linear-gradient(135deg, #00b39e 0%, #009282 50%, #007a6e 100%);
    --cr-grad-wa:     linear-gradient(135deg, #25D366 0%, #128C7E 100%);
}

/* ----- Page background — light, vivid, layered ---------------- */
.contact-page {
    background:
        radial-gradient(900px 600px at 0% 0%,   rgba(14, 175, 160, 0.10), transparent 60%),
        radial-gradient(1000px 700px at 100% 100%, rgba(0, 146, 130, 0.08), transparent 65%),
        linear-gradient(180deg, #ffffff 0%, #f6fafa 55%, #eafbf8 100%) !important;
}

/* The default .lp-nav is semi-transparent (rgba(255,255,255,.72) + blur).
   This page's background gradient has a teal radial glow at the top-left
   corner, which bleeds THROUGH the transparent nav and tints the bar.
   Force an opaque white background so the nav reads as the clean white
   bar it was before the redesign — border/shadow stay at the style.css
   default. Mirrors the svc-redesign / bookkeeping nav treatment. */
.contact-page .lp-nav {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* The .contact-page rule below switches the body font to Manrope, which
   the "Schedule a Free Consultation" button (.btn sets no font of its
   own) inherits — making it differ from the nav on every other page.
   Pin the nav back to the site's default body stack so the bar is
   typographically identical to the rest of the site. (Menu links are
   already locked to Outfit via .menu a in style.css.) */
.contact-page .lp-nav,
.contact-page .lp-nav .btn {
    font-family: "Helvetica Neue", Helvetica, Outfit, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ============================================
   TYPOGRAPHY — Manrope body, Lexend display
   Matches the service-page redesign
   ============================================ */
.contact-page,
.contact-page input,
.contact-page button,
.contact-page select,
.contact-page textarea,
.contact-page label,
.contact-page p {
    font-family: Manrope, 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.contact-page p,
.contact-page li,
.contact-page label,
.contact-page .form-check-label { font-weight: 600; }

.contact-page strong,
.contact-page b { font-weight: 700; }

.contact-page h3, .contact-page h4, .contact-page h5, .contact-page h6 {
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--cr-dark);
}

.contact-page h1,
.contact-page h2,
.contact-page .cr-hero-title,
.contact-page .cr-locations-title {
    font-family: Lexend, Manrope, system-ui, sans-serif;
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--cr-dark);
}


/* ============================================
   HERO — single centered column
   eyebrow → headline → sub → direct cards → tabs
   ============================================ */
.contact-page .about-section {
    padding: 0 !important;
}

.contact-page .cr-hero {
    max-width: 920px;
    margin: 0 auto;
    padding: 56px 24px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ============================================
   HERO COPY — centered eyebrow + Lexend headline
   ============================================ */
.contact-page .cr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 7px 14px 7px 11px;
    background: rgba(0, 146, 130, 0.10);
    border: 1px solid rgba(0, 146, 130, 0.22);
    border-radius: 999px;
    font-family: Manrope, system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.6px;
    color: var(--cr-teal);
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(0, 146, 130, 0.08);
}

.contact-page .cr-eyebrow i {
    font-size: 12px;
    color: var(--cr-teal);
    animation: cr-pulse 2.2s ease-in-out infinite;
}

@keyframes cr-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.15); opacity: 0.75; }
}

.contact-page .cr-eyebrow--center {
    display: block;
    width: max-content;
    margin: 0 auto 14px;
}

.contact-page .cr-hero-title {
    font-size: 36px;
    line-height: 1.12;
    margin: 0 0 14px;
    max-width: 760px;
    text-align: center;
}

.contact-page .cr-hero-title .cr-hl {
    background: linear-gradient(135deg, #00b39e 0%, #009282 50%, #007a6e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.contact-page .cr-hero-sub {
    font-family: Manrope, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--cr-text-soft);
    margin: 0 0 22px;
    max-width: 620px;
    text-align: center;
}

/* Neutralise any legacy h5/about-uss styles still in source order */
.contact-page .about-uss h5 {
    font-size: 16px;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 600 !important;
    padding-bottom: 0;
}


/* ============================================
   STICKY RIGHT-EDGE CONTACT ICONS
   Compact circle at rest; expands into a pill-card on hover
   (desktop with a real pointer only) revealing title + sub.
   The right edge stays anchored — the card grows leftward.
   ============================================ */
.contact-page .cr-stick-contact {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    z-index: 9997;
}

.contact-page .cr-stick-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 48px;
    height: 48px;
    border-radius: 26px;
    color: #ffffff;
    text-decoration: none;
    background: var(--cr-teal);
    border: none;
    overflow: hidden;
    box-shadow:
        0 6px 16px rgba(0, 41, 58, 0.32),
        0 2px 6px rgba(0, 146, 130, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transition:
        width 0.36s cubic-bezier(0.2, 0.85, 0.2, 1),
        background 0.22s ease,
        box-shadow 0.24s ease;
}

.contact-page .cr-stick-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 0 12px 0 18px;
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
    transition:
        opacity 0.2s ease 0.06s,
        transform 0.28s cubic-bezier(0.2, 0.85, 0.2, 1) 0.04s;
}

.contact-page .cr-stick-title {
    font-family: Manrope, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.1px;
    line-height: 1.2;
    white-space: nowrap;
}

.contact-page .cr-stick-sub {
    font-family: Manrope, system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.2;
    white-space: nowrap;
}

.contact-page .cr-stick-ico {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.contact-page .cr-stick-ico svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* WhatsApp variant — green, no pulse */
.contact-page .cr-stick-link[href*="whatsapp"] { background: #25d366; }
.contact-page .cr-stick-link[href*="whatsapp"] svg { fill: currentColor; stroke: none; }

/* Expand into a pill-card — only fires on devices with a real
   hover pointer (mouse) AND a desktop-sized viewport, so touch
   tablets/phones never get the half-open hover state. */
@media (hover: hover) and (min-width: 992px) {
    .contact-page .cr-stick-link:hover,
    .contact-page .cr-stick-link:focus-visible {
        width: 260px;
        background: #00a896;
        box-shadow:
            0 14px 30px rgba(0, 41, 58, 0.36),
            0 4px 12px rgba(0, 146, 130, 0.44),
            inset 0 1px 0 rgba(255, 255, 255, 0.30);
        outline: none;
    }

    .contact-page .cr-stick-link[href*="whatsapp"]:hover,
    .contact-page .cr-stick-link[href*="whatsapp"]:focus-visible {
        width: 290px;
        background: #1fb759;
        box-shadow:
            0 14px 30px rgba(0, 41, 58, 0.36),
            0 4px 12px rgba(31, 183, 89, 0.44),
            inset 0 1px 0 rgba(255, 255, 255, 0.30);
    }

    .contact-page .cr-stick-link:hover .cr-stick-body,
    .contact-page .cr-stick-link:focus-visible .cr-stick-body {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ============================================
   FORM SECTIONS — let Bootstrap container/col-lg-9 handle
   width; just normalize the section padding
   ============================================ */
.contact-page #request-service-section,
.contact-page #join-team-section,
.contact-page #media-queries-section {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    transition: opacity 0.3s ease;
}


/* ============================================
   TAB PILLS — centered under the hero copy
   ============================================ */
.contact-page .cr-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 6px !important;
    justify-content: center;
}

.contact-page .btn.cr-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px !important;
    width: auto;
    min-width: 0;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--cr-text) !important;
    border: 1.5px solid var(--cr-line) !important;
    font-family: Manrope, system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px;
    letter-spacing: 0.1px;
    box-shadow: var(--cr-shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.contact-page .btn.cr-pill i {
    font-size: 15px;
    color: var(--cr-teal);
    transition: color 0.18s ease, transform 0.18s ease;
}

.contact-page .btn.cr-pill:hover {
    border-color: var(--cr-teal) !important;
    transform: translateY(-2px);
    box-shadow: var(--cr-shadow-md);
}

.contact-page .btn.cr-pill:hover i { transform: translateX(1px) scale(1.05); }

.contact-page .btn.cr-pill.active {
    background: var(--cr-grad-teal) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 12px 26px rgba(0, 146, 130, 0.32), 0 0 0 4px rgba(0, 146, 130, 0.10);
    transform: translateY(-1px);
}

.contact-page .btn.cr-pill.active i { color: #ffffff; }

.contact-page .btn.cr-pill:focus-visible {
    outline: none;
    box-shadow: var(--cr-shadow-md), var(--cr-ring);
}


/* ============================================
   FORM CARD — white card, gradient accent stripe, soft shadow
   ============================================ */
.contact-page #request-service-section .col-lg-9 > .card,
.contact-page #join-team-section .col-lg-9 > form,
.contact-page #media-queries-section .col-lg-9 > form {
    position: relative;
    background: #ffffff !important;
    border: 1px solid var(--cr-line-soft) !important;
    border-radius: 22px !important;
    box-shadow: var(--cr-shadow-lg);
    overflow: hidden;
}

.contact-page #request-service-section .col-lg-9 > .card::before,
.contact-page #join-team-section .col-lg-9 > form::before,
.contact-page #media-queries-section .col-lg-9 > form::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--cr-grad-teal);
    z-index: 1;
}

.contact-page .card-body {
    padding: 32px 32px !important;
}


/* ============================================
   FORM LABELS
   ============================================ */
.contact-page .form-label {
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 700 !important;
    font-size: 13.5px;
    color: var(--cr-dark);
    margin-bottom: 7px;
    letter-spacing: -0.005em;
}

.contact-page .mt-4 .form-label {
    font-family: Manrope, system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--cr-dark);
    margin-bottom: 12px !important;
    letter-spacing: -0.01em;
}

.contact-page .form-label .text-danger,
.contact-page .form-label span {
    color: var(--cr-teal) !important;
    margin-left: 2px;
}


/* ============================================
   INPUTS — taller, softer, with focus halo
   ============================================ */
.contact-page .form-control,
.contact-page .custom-input {
    height: 46px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1.5px solid var(--cr-line);
    background: #ffffff;
    color: var(--cr-text);
    font-family: Manrope, system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    box-shadow: none;
}

.contact-page .form-control::placeholder,
.contact-page .custom-input::placeholder {
    color: #98b4bc;
    font-weight: 500;
}

.contact-page .form-control:hover,
.contact-page .custom-input:hover { border-color: #9fcfc7; }

.contact-page .form-control:focus,
.contact-page .custom-input:focus {
    border-color: var(--cr-teal);
    box-shadow: var(--cr-ring);
    background: #ffffff;
    outline: none;
}

.contact-page textarea.form-control {
    height: auto;
    min-height: 110px;
    padding: 12px 14px;
    resize: vertical;
}


/* ============================================
   CUSTOM CHECKBOX + RADIO — vibrant teal, scale anim
   ============================================ */
.contact-page .form-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    background: transparent;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
    cursor: pointer;
    min-height: 40px;
    margin-bottom: 0;
}

.contact-page .form-check:hover {
    border-color: var(--cr-line);
    background: var(--cr-soft-bg);
}

.contact-page .form-check:has(.form-check-input:checked) {
    border-color: var(--cr-teal);
    background: rgba(0, 146, 130, 0.06);
}

.contact-page .form-check-input {
    margin: 0;
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    border: 1.8px solid var(--cr-teal);
    background: #ffffff;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    box-shadow: none;
}

.contact-page .form-check-input[type="checkbox"] { border-radius: 5px; }

.contact-page .form-check-input[type="radio"],
.contact-page .radius-checkbox .form-check-input { border-radius: 50% !important; }

.contact-page .form-check-input:hover {
    border-color: var(--cr-deep);
    transform: scale(1.05);
}

.contact-page .form-check-input:focus-visible {
    outline: none;
    box-shadow: var(--cr-ring);
}

.contact-page .form-check-input:checked {
    background-color: var(--cr-teal) !important;
    border-color: var(--cr-teal) !important;
    animation: cr-pop 0.28s ease;
}

@keyframes cr-pop {
    0%   { transform: scale(0.85); }
    60%  { transform: scale(1.12); }
    100% { transform: scale(1.0); }
}

.contact-page .form-check-label {
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 600 !important;
    font-size: 14px;
    color: var(--cr-text);
    cursor: pointer;
    margin: 0;
    line-height: 1.3;
}

.contact-page .other-center {
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-width: 0;
}

.contact-page .other-center .form-control {
    height: 36px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    min-width: 0;
    max-width: 220px;
    flex: 1 1 140px;
}


/* ============================================
   UPLOAD BOX
   ============================================ */
.contact-page .upload-box {
    border: 1.5px dashed var(--cr-line);
    border-radius: 12px;
    padding: 8px 14px;
    background: var(--cr-soft-bg);
    width: 100%;
    max-width: 100%;
    margin-bottom: 22px;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.contact-page .upload-box:hover {
    border-color: var(--cr-teal);
    background: #ffffff;
}

.contact-page .upload-box .form-control {
    border: none;
    background: transparent;
    box-shadow: none;
    height: 40px;
    padding-left: 0;
}

.contact-page .upload-box .form-control:focus { box-shadow: none; border: none; }

.contact-page .upload-box label {
    background: var(--cr-grad-teal) !important;
    color: #ffffff !important;
    padding: 9px 13px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 14px rgba(0, 146, 130, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.contact-page .upload-box label:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(0, 146, 130, 0.32);
}

.contact-page .upload-box label p { margin: 0 !important; }


/* ============================================
   SUBMIT BUTTON — gradient teal, lift, arrow nudge
   ============================================ */
.contact-page .submit-button,
.contact-page .cr-submit {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center;
    gap: 12px;
    padding: 17px 42px !important;
    width: auto !important;
    min-width: 250px;
    border-radius: 999px !important;
    background: var(--cr-grad-teal) !important;
    border: none !important;
    color: #ffffff !important;
    font-family: Manrope, system-ui, sans-serif !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    letter-spacing: 0.2px;
    white-space: nowrap !important;
    line-height: 1;
    box-shadow: 0 14px 30px rgba(0, 146, 130, 0.32), 0 0 0 0 rgba(0, 146, 130, 0);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    cursor: pointer;
}

/* Lock the label and arrow on the same line — flex-shrink: 0 stops
   them from wrapping when something else on the page (Bootstrap utilities,
   layout context) would otherwise compress the button. */
.contact-page .submit-button > span,
.contact-page .cr-submit > span,
.contact-page .submit-button > i,
.contact-page .cr-submit > i {
    display: inline-flex !important;
    align-items: center;
    white-space: nowrap !important;
    flex-shrink: 0;
    flex-grow: 0;
}

.contact-page .submit-button i,
.contact-page .cr-submit i {
    font-size: 20px;
    transition: transform 0.22s ease;
}

.contact-page .submit-button:hover,
.contact-page .cr-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(0, 146, 130, 0.40);
    filter: brightness(1.04);
}

.contact-page .submit-button:hover i,
.contact-page .cr-submit:hover i { transform: translateX(4px); }

.contact-page .submit-button:active,
.contact-page .cr-submit:active { transform: translateY(0); }

.contact-page .submit-button:focus-visible,
.contact-page .cr-submit:focus-visible {
    outline: none;
    box-shadow: 0 14px 30px rgba(0, 146, 130, 0.32), var(--cr-ring);
}


/* ============================================
   ALERTS — match the brand
   ============================================ */
.contact-page .alert-success {
    background: rgba(0, 146, 130, 0.08);
    color: var(--cr-deep);
    border: 1px solid rgba(0, 146, 130, 0.22);
    border-radius: 12px;
    padding: 12px 16px;
    font-weight: 700;
}

.contact-page .alert-danger {
    background: rgba(220, 38, 38, 0.06);
    color: #8a1c1c;
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-radius: 12px;
    padding: 12px 16px;
    font-weight: 700;
}


/* ============================================
   Desktop only — interactive focus-within highlight on
   multi-option questions. The "panel" appears only while
   the user is engaging with that question, so the form stays
   visually clean at rest but feels structured and premium
   the moment any input/checkbox/radio inside gets focus.

   Negative margin + matching padding means content position
   doesn't shift; only the highlight expands outward.
   ============================================ */
@media (min-width: 768px) {
    .contact-page form > .mt-4:not(.text-center) {
        position: relative;
        padding: 16px 18px;
        margin-left: -18px;
        margin-right: -18px;
        border-radius: 14px;
        background: transparent;
        border: 1px solid transparent;
        box-shadow: 0 0 0 0 rgba(0, 41, 58, 0);
        transition:
            background 0.24s ease,
            border-color 0.24s ease,
            box-shadow 0.28s ease,
            transform 0.24s ease;
    }

    /* Highlight when (a) the user is actively interacting with the
       question — :focus-within — OR (b) the question has already
       been answered: any checkbox/radio inside is :checked, or the
       textarea has typed content (:not(:placeholder-shown)). The
       answered-state highlight stays put as the user moves on, so
       previously-answered questions remain visually anchored. */
    .contact-page form > .mt-4:not(.text-center):focus-within,
    .contact-page form > .mt-4:not(.text-center):has(.form-check-input:checked),
    .contact-page form > .mt-4:not(.text-center):has(textarea:not(:placeholder-shown)) {
        background: rgba(0, 146, 130, 0.045);
        border-color: rgba(0, 146, 130, 0.20);
        box-shadow: 0 8px 24px rgba(0, 41, 58, 0.07);
    }

    /* Accent stripe — focus only, so it acts as a "you are here"
       cue. Answered questions sit in the calmer panel highlight
       without the stripe, giving clear visual hierarchy. */
    .contact-page form > .mt-4:not(.text-center)::before {
        content: '';
        position: absolute;
        top: 50%;
        left: -2px;
        width: 3px;
        height: 0;
        transform: translateY(-50%);
        background: var(--cr-grad-teal);
        border-radius: 3px;
        opacity: 0;
        transition: height 0.28s ease, opacity 0.24s ease;
    }

    .contact-page form > .mt-4:not(.text-center):focus-within::before {
        height: calc(100% - 24px);
        opacity: 1;
    }
}


/* ============================================
   In-form social proof (under each submit button)
   ============================================ */
.contact-page .group-img {
    width: 100%;
    margin: 22px auto 0;
    display: flex;
    justify-content: center;
}

.contact-page .group-img .social-proof {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px 18px;
    background: rgba(0, 146, 130, 0.04);
    border: 1px solid rgba(0, 146, 130, 0.14);
    border-radius: 14px;
    box-shadow: var(--cr-shadow-sm);
}

.contact-page .group-img .avatars--brands {
    display: inline-flex;
    align-items: center;
}

/* Brand cells — mirrors the location-page hero (style.css .avatars--brands)
   but sized for the trust strip. White bg lets the logo PNGs (designed
   for light backgrounds) show clearly; teal-tinted ring keeps them on
   brand against the light bar. */
.contact-page .group-img .avatars--brands .brand-cell {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid rgba(0, 146, 130, 0.55);
    box-shadow: 0 4px 12px rgba(0, 41, 58, 0.12);
    padding: 7px;
    margin-left: -14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease, z-index 0s;
}

.contact-page .group-img .avatars--brands .brand-cell:first-child { margin-left: 0; }

.contact-page .group-img .avatars--brands .brand-cell:nth-child(1) { z-index: 5; }
.contact-page .group-img .avatars--brands .brand-cell:nth-child(2) { z-index: 4; }
.contact-page .group-img .avatars--brands .brand-cell:nth-child(3) { z-index: 3; }
.contact-page .group-img .avatars--brands .brand-cell:nth-child(4) { z-index: 2; }
.contact-page .group-img .avatars--brands .brand-cell:nth-child(5) { z-index: 1; }

.contact-page .group-img .avatars--brands .brand-cell:hover {
    transform: translateY(-2px) scale(1.06);
    z-index: 10;
    box-shadow: 0 10px 20px rgba(0, 41, 58, 0.18);
}

.contact-page .group-img .avatars--brands .brand-cell img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
    margin: 0;
    filter: none;
    background: transparent;
    border: none;
    box-shadow: none;
    display: block;
}

.contact-page .group-img .sp-divider {
    width: 1px;
    height: 24px;
    background: rgba(0, 41, 58, 0.16);
}

.contact-page .group-img .rating {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.contact-page .group-img .stars {
    display: inline-flex;
    gap: 3px;
}

.contact-page .group-img .stars .star { width: 14px; height: 14px; }

.contact-page .group-img .proof-copy {
    white-space: nowrap;
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: 0.2px;
    color: var(--cr-dark);
    line-height: 1.2;
}


/* ============================================
   LOCATIONS — image cards with hover lift
   ============================================ */
.contact-page .locations-section {
    padding-top: 60px !important;
    padding-bottom: 80px !important;
}

.contact-page .cr-locations-title {
    font-size: 44px;
    margin-bottom: 44px !important;
}

.contact-page .location-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--cr-line-soft);
    border-radius: 22px;
    overflow: hidden;
    padding: 14px;
    box-shadow: var(--cr-shadow-md);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.contact-page .location-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cr-shadow-lg);
}

.contact-page .location-img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 14px;
    display: block;
}

.contact-page .location-content {
    margin-top: 18px;
    padding: 0 8px 10px;
}

.contact-page .location-content h5 {
    font-family: Lexend, Manrope, system-ui, sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: var(--cr-dark);
    margin: 0 0 6px;
    letter-spacing: -0.015em;
}

.contact-page .location-content p {
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--cr-text-soft);
    line-height: 1.5;
}


/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
    .contact-page .cr-hero {
        padding: 44px 20px 24px;
    }
    .contact-page .cr-hero-title {
        font-size: 32px;
    }
    .contact-page .cr-locations-title {
        font-size: 34px;
    }
    .contact-page .card-body {
        padding: 26px 22px !important;
    }
    .contact-page .group-img .social-proof {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .contact-page .cr-hero {
        padding: 32px 16px 20px;
    }
    .contact-page .cr-hero-title { font-size: 26px; line-height: 1.14; }
    .contact-page .cr-hero-sub   { font-size: 14.5px; margin-bottom: 18px; }

    /* Sticky icons — moved to bottom-right corner so they don't
       overlap the form inputs at the right edge on phones */
    .contact-page .cr-stick-contact {
        top: auto;
        bottom: 16px;
        right: 12px;
        transform: none;
        flex-direction: row;
        gap: 8px;
    }
    .contact-page .cr-stick-link { width: 44px; height: 44px; }
    .contact-page .cr-stick-link svg { width: 18px; height: 18px; }
    /* Drop the pulse ring on mobile — saves paint cost and reduces
       visual noise when the icons are sitting in the corner */
    .contact-page .cr-stick-link::after { display: none; }

    /* ----------------------------------------------------------
       Mobile-only: wrap each question / field row in a soft
       transparent panel so the long form feels less congested.
       Desktop view is completely unchanged.
       ---------------------------------------------------------- */
    .contact-page form > .row,
    .contact-page form > .mt-4:not(.text-center) {
        background: rgba(0, 146, 130, 0.035);
        border: 1px solid rgba(0, 146, 130, 0.12);
        border-radius: 14px;
        padding: 14px 12px;
        margin-top: 14px !important;
    }
    /* Bootstrap rows have negative gutter margins that escape the
       panel padding; reset and shrink the gutter inside the panel */
    .contact-page form > .row {
        margin-right: 0;
        margin-left: 0;
        --bs-gutter-x: 0.75rem;
    }
    /* First field row shouldn't push down from the form top */
    .contact-page form > .row:first-of-type {
        margin-top: 0 !important;
    }
    /* Add a touch of breathing room inside the panels */
    .contact-page form > .mt-4:not(.text-center) > .form-label,
    .contact-page form > .mt-4:not(.text-center) > .form-label.fw-semibold {
        margin-bottom: 10px !important;
    }

    /* Other + Please-Specify still inline on phones — but allow the
       input to shrink so it fits next to the checkbox on small widths */
    .contact-page .other-center .form-control {
        height: 34px;
        font-size: 13px;
        flex: 1 1 100px;
        max-width: none;
    }
    .contact-page .other-center .form-check-label { font-size: 13px; }

    /* Tabs stay as a row of three side-by-side pills on mobile.
       Icons hidden to save horizontal space; text is allowed to
       wrap to a second line inside the pill if needed. */
    .contact-page .cr-tabs {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: stretch;
        gap: 6px !important;
    }
    .contact-page .btn.cr-pill {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        padding: 9px 8px !important;
        font-size: 12px;
        gap: 0;
        text-align: center;
        line-height: 1.18;
    }
    .contact-page .btn.cr-pill i { display: none; }
    .contact-page .btn.cr-pill span {
        white-space: normal;
        display: inline-block;
    }
    .contact-page .card-body { padding: 20px 16px !important; }
    .contact-page .form-label { font-size: 13px; }
    .contact-page .mt-4 .form-label { font-size: 14px !important; }
    .contact-page .form-control,
    .contact-page .custom-input { height: 44px; font-size: 14px; }
    .contact-page .form-check { padding: 7px 10px; }
    .contact-page .form-check-label { font-size: 13.5px; }
    .contact-page .radius-checkbox .d-flex.gap-3 { flex-wrap: wrap; }
    .contact-page .submit-button,
    .contact-page .cr-submit {
        padding: 15px 34px !important;
        min-width: 210px;
        font-size: 15.5px !important;
    }

    .contact-page .group-img .social-proof {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100%;
        align-items: center !important;
        padding: 12px 14px;
    }
    .contact-page .group-img .sp-divider { display: none !important; }
    .contact-page .group-img .rating { align-items: center !important; }
    .contact-page .group-img .stars { justify-content: center !important; }

    .contact-page .locations-section {
        padding-top: 36px !important;
        padding-bottom: 50px !important;
    }
    .contact-page .cr-locations-title {
        font-size: 24px;
        margin-bottom: 28px !important;
    }
    .contact-page .location-img { height: 240px; }
    .contact-page .location-content h5 { font-size: 19px; }
    .contact-page .upload-box { margin-bottom: 18px; }
}