/* =========================================================================
   Contact Popup Modal - Web Only Desktop Implementation
   Provides perfectly scaled identical output to Figma mockups globally
   ========================================================================= */

/* Screen-reader-only live region: announces "Sending...", success and error
   text to assistive tech without any visual footprint (the visible feedback
   is the centered popup below + the inline field tooltips). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Per-field validation - a floating tooltip anchored to the field itself
   (position: absolute, taken out of flow) so an error never pushes the
   field's row, or any row after it, down. .form-group is its containing
   block (position: relative, added below). */
.field-error:empty {
    display: none;
}

.field-error {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    /* White card + a red accent, not a solid red block - reads as a subtle
       tooltip rather than an alarming banner. */
    background: #FFFFFF;
    color: #C5221F;
    border: 1px solid #F6C2BF;
    font-family: 'Inter', var(--font-body, sans-serif);
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    padding: 6px 10px 6px 9px;
    border-left: 3px solid #C5221F;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    z-index: 5;
    /* Decorative bubble only - never blocks clicks on whatever it overlaps
       (e.g. the row below it, or the services list). */
    pointer-events: none;
}

/* Tiny bordered speech-bubble arrow: a slightly larger border-colored
   triangle behind a slightly smaller white one on top, so the arrow shows
   the same thin outline as the card instead of a flat solid wedge. */
.field-error::before,
.field-error::after {
    content: '';
    position: absolute;
    left: 14px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.field-error::before {
    top: -7px;
    border-bottom: 6px solid #F6C2BF;
}

.field-error::after {
    top: -6px;
    border-bottom: 6px solid #FFFFFF;
}

.form-group.has-error .form-control-custom {
    box-shadow: 0 0 0 1.5px #C5221F inset;
}

/* =========================================================
   RESULT POPUP - centered success/error confirmation
   Fixed to the viewport (not the scaled/transformed
   .contact-modal-container) so it centers correctly on every
   breakpoint, and lives as a direct child of #contactModal so it
   travels along whenever js/contact-modal.js injects the modal
   into another page.
   ========================================================= */
.contact-result-popup {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    padding: 20px;
    box-sizing: border-box;
}

.contact-result-popup.active {
    opacity: 1;
    pointer-events: auto;
}

.contact-result-popup-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 40px 36px 36px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.25);
    transform: translateY(8px);
    transition: transform 0.25s ease;
}

.contact-result-popup.active .contact-result-popup-card {
    transform: translateY(0);
}

.contact-result-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: #8A9296;
    padding: 8px;
}

.contact-result-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

.contact-result-popup.is-success .contact-result-icon {
    background: #E6F4EA;
    color: #1E7B34;
}

.contact-result-popup.is-error .contact-result-icon {
    background: #FDECEA;
    color: #C5221F;
}

.contact-result-message {
    font-family: 'Inter', var(--font-body, sans-serif);
    font-size: 16px;
    line-height: 24px;
    color: #1B3834;
    margin: 0;
}

/* General Reset for the standalone wrapper, ensuring the backdrop sits fixed */
.contact-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    /* Dimming background for focus */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.contact-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Scaling Wrapper: guarantees it dynamically scales onto smaller 1366 / 1280 screens 
   while strictly keeping aspect ratio and Figma constraints unmodified */
.contact-modal-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* 1102x760 Exact Figma Container */
.contact-modal-container {
    width: 1102px;
    height: 760px;
    background: #FFFFFF;
    border-radius: 12px;
    /* Subtle standard rounding as implied by web design popup standards */
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 4px 64px rgba(0, 0, 0, 0.15);
    transform-origin: center center;
}

/* Close mark logic */
.contact-modal-close {
    position: absolute;
    top: 25px;
    right: 25px;
    /* .contact-modal-right can still scroll internally on desktop as a
       last-resort safety net (see below) - this button lives outside that
       scroll area, so give it an opaque backdrop or scrolled-under content
       would visually collide with it. */
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
    border: none;
    cursor: pointer;
    z-index: 10;
    display: flex;
    padding: 10px;
    /* Expand hit area */
}

.contact-modal-close:hover path {
    stroke: #FFA726;
    transition: 0.3s;
}

/* Left Panel - Dark - 433px width */
.contact-modal-left {
    width: 433px;
    height: 100%;
    background: #263238;
    flex-shrink: 0;
    padding: 122px 34px 122px 61px;
    /* Adjusted right padding to 34px so content region is exactly 338px */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.contact-title {
    font-family: 'Mona Sans', var(--font-heading, sans-serif);
    font-weight: 600;
    font-size: 35px;
    line-height: 42px;
    color: #FFA726;
    margin: 0 0 125px 0;
    /* 331 - 122 - 84 = 125 gap */
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 25px;
    font-family: 'Mona Sans', var(--font-heading, sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 29px;
    letter-spacing: 0.01em;
    color: #FFFFFF;
}

/* Specific start alignment for multi-line location block. Was
   align-items:center (contradicting its own class name), which centered the
   pin icon against the whole two-address stack instead of the first line -
   flex-start keeps the icon level with the first address, same as before
   the second address was added. */
.contact-info-item.align-start {
    align-items: flex-start;
    line-height: 20px;
    gap: 29px;
}

.contact-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Right Panel - Form Base - White - remaining width (669px) */
.contact-modal-right {
    flex-grow: 1;
    background: #FFFFFF;
    padding: 42px 47px 42px 47px;
    /* Figma Right Container Start is x:480 (480 - 433 leftPanel = 47px padding left) */
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    /* Last-resort safety net only (desktop): validation errors are floating
       tooltips and the success/error message is a separate centered popup,
       so nothing here should add real height any more. Kept anyway in case
       of an unusually long ACF-edited label - the card above this has a
       fixed height + overflow:hidden to match the Figma frame exactly, so
       without this, an overflow would be clipped and unreachable rather
       than just scrollable. Disabled on mobile (below) in favor of letting
       the whole modal scroll as one piece. */
    overflow-y: auto;
}

.contact-logo {
    width: 173px;
    height: 62px;
    object-fit: contain;
    object-position: left;
    margin-bottom: 26px;
    /* Tightened so the whole form, including SEND MESSAGE, fits the fixed
       760px card without the right panel needing to scroll. */
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* y gap between form blocks */
    width: 578px;
    /* Form block actual exact width per Figma */
}

.form-row {
    display: flex;
    flex-direction: row;
    /* flex-start (not center): when one field in a row shows an inline error
       below it and its sibling doesn't, this keeps both inputs' tops level
       instead of vertically centering them out of alignment. */
    align-items: flex-start;
    gap: 41px;
    width: 100%;
}

.form-row.full-row {
    width: 100%;
}

.form-group {
    display: flex;
    flex-direction: column;
    /* Containing block for .field-error, which is position: absolute so its
       tooltip never affects this group's (or any row's) height. */
    position: relative;
}

.form-row .form-group:first-child {
    flex: 0 0 280px;
}

.form-row .form-group:nth-child(2) {
    flex: 0 0 257px;
}

.form-control-custom {
    width: 100%;
    height: 51px;
    background: #D1D5D9;
    border: none;
    padding: 0 17px;
    box-sizing: border-box;
    font-family: 'Inter', var(--font-body, sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: #1B3834;
    outline: none;
}

.form-control-custom::placeholder {
    color: #1B3834;
    opacity: 1;
}

.form-control-custom:focus {
    background: #C8CDD1;
}

/* Specific paddings based on column position exactly matching Figma gaps */
.form-row .form-group:first-child input.form-control-custom {
    padding-left: 24px;
}

/* Two addresses stacked under the single pin icon, per Figma node 3023:512
   (vertical stack, each line 284px wide at 18px/20). Figma's own 11px gap
   read too tight next to the icon in practice - bumped for more breathing
   room per client feedback. */
.contact-address-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-address-stack span {
    display: inline-block;
    width: 284px;
    max-width: 284px;
}

.services-interest {
    margin-top: 8px;
    /* Offset the regular gap to reach the Figma y coord */
    margin-left: 12px;
    /* Nudged right of the other form rows so the gap from the left panel is 59px instead of 47px */
}

.services-label {
    display: block;
    font-family: 'Inter', var(--font-body, sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0.01em;
    color: #1B3834;
    /* Figma node 3030:562: 20px between the heading and the service columns */
    margin-bottom: 20px;
}

.services-grid {
    /* Mobile list keeps wrapping on content (see the mobile block); the
       desktop grid below overrides this with the Figma column layout. */
    display: flex;
    flex-wrap: wrap;
    column-gap: 14px;
    row-gap: 8px;
    width: 100%;
    height: auto;
    justify-content: flex-start;
    align-items: center;
}

/* Desktop: Figma node 3030:553 lays the nine services out as five columns of
   two (the last column holds a single item), flowing DOWN each column then
   across - not as wrapped rows. grid-auto-flow: column with two explicit rows
   reproduces that order exactly.
   Columns are auto-sized to their own text (each item is 29px line-height,
   white-space:nowrap), so justify-content alone decides how far right they
   reach. The correct target is the Message box's own right edge, not the
   full 100%-width container: .message-group .form-control-custom is a
   deliberate 561px (narrower than the 578px form), and .services-interest
   (this grid's parent) is itself nudged 12px right of the form's left edge
   - so matching the message box's right edge means a width of
   561px - 12px = 549px here, not 100%. space-between then spreads the 5
   columns to fill exactly that, growing the gaps past the nominal 13px
   instead of leaving dead space (or, at 100%, overshooting the message box
   as it did before this was narrowed). */
.services-grid.desktop-only-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    row-gap: 0;
    justify-content: space-between;
    align-items: start;
    width: 549px;
    height: auto;
}

.services-grid.desktop-only-grid .service-checkbox {
    /* 14px / 29px per Figma */
    line-height: 29px;
}

.service-checkbox {
    font-family: 'Mona Sans', var(--font-heading, sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.01em;
    color: #263238;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.2s;
}

.service-checkbox.selected {
    color: #FFA726;
}

.form-row.message-row {
    margin-top: 14px;
    /* Gap from services grid based on Figma */
}

.message-group .form-control-custom {
    width: 561px;
    height: 107px;
    padding-top: 18px;
    resize: none;
}

.btn-send-message {
    margin-top: 22px;
    /* Gap from message box based on Figma */
    width: 180px;
    height: 40px;
    background: #263238;
    border-radius: 55px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 7px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-send-message:hover {
    background: #101518;
}

.btn-send-message .icon-circle {
    width: 24px;
    height: 24px;
    background: #FFA726;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0;
}

.btn-send-message .btn-text {
    font-family: 'Inter', var(--font-body, sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 30px;
    letter-spacing: 0.01em;
    color: #FFFFFF;
    margin-left: 10.53px;
}

/* =========================================================
   SCALING FOR SINGLE VIEWPORT
   ========================================================= */

@media (max-width: 1200px) {
    .contact-modal-container {
        transform: scale(0.85);
    }
}

@media (max-width: 950px) {
    .contact-modal-container {
        transform: scale(0.75);
    }
}

@media (max-height: 800px) {
    .contact-modal-container {
        transform: scale(0.8);
    }
}

@media (max-height: 650px) {
    .contact-modal-container {
        transform: scale(0.65);
    }
}

/* =========================================================
   VISIBILITY HELPERS – desktop vs mobile element toggling
   ========================================================= */
.mobile-only {
    display: none !important;
}

/* The mobile-specific service list (adds "All Services" / "AI Marketing" to
   match the Figma mobile spec) stays hidden until the mobile breakpoint
   below swaps it in for .desktop-only-grid. */
.mobile-only-grid {
    display: none !important;
}

/* Hide mobile-specific close button on desktop */
.contact-modal-close-mobile {
    display: none !important;
}

/* =========================================================
   MOBILE LAYOUT – Figma-faithful single white card
   Designed width 351px, scales fluid on all phones (320-430px+)

   Also applied to any very short viewport (a phone held in landscape, or a
   short desktop window). There the desktop card - 760px tall, only scaled
   down to 0.65 - still overflowed a ~390px viewport and centring made the
   overflow unreachable. The scrollable single-card layout handles it.
   ========================================================= */
@media (max-width: 767px), (max-height: 500px) {

    /* --- Visibility toggles --- */
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: flex !important;
    }

    /* --- Overlay: full-screen centered host --- */
    .contact-modal-overlay {
        background: rgba(0, 0, 0, 0.35);
        /* align-items:center would overflow the card equally above and below
           the viewport, but overflow-y only scrolls downward - so on a short
           phone (e.g. 390x664 with Safari's chrome showing) the top ~70px of
           the card was unreachable. flex-start + margin:auto on the wrapper
           still centers it when it fits, without ever clipping the top. */
        align-items: flex-start;
        justify-content: center;
        /* dvh excludes the iOS browser chrome, so the bottom of the form is
           not left sitting underneath it. vh stays as the fallback. */
        height: 100vh;
        height: 100dvh;
        padding: 6px;
        /* was 16px - trimmed along with other spacing below so the card
           fits every tested phone height (320x568 up) without scrolling */
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .contact-modal-wrapper {
        align-items: center;
        height: auto;
        min-height: auto;
        /* auto margins center the card when there is spare room and collapse
           to 0 when there is not, keeping every edge scrollable. */
        margin: auto;
    }

    /* --- Card: White rounded container --- */
    .contact-modal-container {
        transform: none;
        width: calc(100% - 0px);
        max-width: 351px;
        height: auto;
        min-height: auto;
        border-radius: 17px;
        flex-direction: column;
        overflow: visible;
        box-shadow: 0 4px 40px rgba(0, 0, 0, 0.12);
        position: relative;
    }

    /* --- Hide the desktop left panel entirely --- */
    .contact-modal-left {
        display: none;
    }

    /* --- Mobile close button (top-right of card) --- */
    .contact-modal-close-mobile {
        position: absolute;
        top: 26px;
        /* Figma: close sits beside the logo row, not below it */
        right: 20px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 10;
        padding: 4px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* --- Right panel becomes the only panel --- */
    .contact-modal-right {
        width: 100%;
        background: #FFFFFF;
        padding: 28px 20px 14px;
        /* was 38px 20px 20px (Figma: pt-38 px-20 pb-20) - top/bottom
           trimmed for viewport fit; close button (top:26px) still clears
           the header row */
        box-sizing: border-box;
        border-radius: 17px 17px 0 0;
        position: relative;
        /* Undo the desktop safety-net scrollbar: on mobile the card already
           grows to fit its content (.contact-modal-container is height:auto
           here) and .contact-modal-overlay itself scrolls - so the whole
           modal moves as one piece instead of this one panel scrolling
           inside a fixed-height card. */
        overflow: visible;
    }

    /* --- Mobile header: Logo + Title --- */
    .mobile-contact-header {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
        /* was gap:12px / margin-bottom:20px (Figma: gap-20 to the fields
           below) - trimmed for viewport fit */
    }

    .mobile-contact-logo {
        width: 109px;
        height: 39px;
        object-fit: contain;
        object-position: left;
    }

    .mobile-contact-title {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 19px;
        line-height: 1.2em;
        color: #1B3834;
        margin: 0;
        text-align: left;
    }

    /* --- Form: stacked single-column layout --- */
    .contact-form {
        width: 100%;
        gap: 12px !important;
    }

    .form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px !important;
    }

    .form-row .form-group:first-child,
    .form-row .form-group:nth-child(2) {
        flex: 1 1 auto;
    }

    /* --- Field order: Figma stacks First, Last, Phone, Company, Email.
       Desktop keeps its own First+Last / Email+Phone / Company row pairing
       (untouched), so reorder here instead of changing the shared markup:
       collapse the field rows into .contact-form's flex flow and reorder
       the individual fields with `order`. --- */
    .form-row-fields {
        display: contents;
    }

    .field-first {
        order: 1;
    }

    .field-last {
        order: 2;
    }

    .field-phone {
        order: 3;
    }

    .field-company {
        order: 4;
    }

    .field-email {
        order: 5;
    }

    /* Was margin-bottom:10px on top of .contact-form's 12px gap (22px total)
       to clear a validation-error tooltip before it could cover the next
       field. Client asked for exactly 12px between fields and more room
       overall to guarantee the whole modal fits one viewport on every
       phone size - removed here, so fields now rely on the 12px gap alone.
       Slightly less tooltip clearance than before; still readable, just
       tighter. */
    .field-first,
    .field-last,
    .field-phone,
    .field-company,
    .field-email {
        margin-bottom: 0;
    }

    /* Input fields: Figma 303×36px → responsive full-width */
    .form-control-custom {
        width: 100% !important;
        height: 36px;
        background: #D1D5D9;
        border: none;
        padding: 0 19px;
        box-sizing: border-box;
        font-family: 'Inter', sans-serif;
        font-weight: 400;
        font-size: 12px;
        line-height: 20px;
        letter-spacing: 0.01em;
        color: #1B3834;
    }

    .form-control-custom::placeholder {
        color: #1B3834;
        opacity: 1;
    }

    /* Override any desktop-specific input padding */
    .form-row .form-group:first-child input.form-control-custom {
        padding-left: 19px;
    }

    .field-error {
        font-size: 11px;
        line-height: 14px;
        margin-top: 6px;
        padding: 5px 9px;
    }

    .contact-result-popup-card {
        padding: 32px 24px 28px;
        max-width: 320px;
    }

    .contact-result-icon {
        width: 48px;
        height: 48px;
        font-size: 22px;
        margin-bottom: 16px;
    }

    .contact-result-message {
        font-size: 14px;
        line-height: 21px;
    }

    /* --- Services section --- */
    .services-interest {
        margin-top: 8px;
        /* 12px + 8px = 20px section gap (was 16px -> 28px total) */
        margin-left: 0;
        order: 6;
        /* Scale the chip row to the card's actual rendered width (not the
           viewport) so it stays proportional to the 311px Figma reference
           on every phone size, down to the narrowest (iPhone SE ~320px)
           without the row overflowing the card. */
        container-type: inline-size;
    }

    /* "What services are you interested in?" is dropped entirely on mobile -
       heading and both grids - so the card fits on a phone screen without
       scrolling. contact-form.js only submits checkboxes whose offsetParent
       is non-null, so hiding the block also stops it sending a stale
       default-selected service. */
    .services-interest {
        display: none !important;
    }

    .desktop-only-grid,
    .mobile-only-grid {
        display: none !important;
    }

    .services-label {
        font-family: 'Inter', sans-serif;
        font-weight: 400;
        font-size: 4.1801cqi;
        /* 13px at the 311px reference width */
        line-height: 1.54;
        letter-spacing: 0.01em;
        color: #1B3834;
        margin-bottom: 18px;
    }

    .services-grid {
        /* Three max-content columns forced exactly 3 items per row, so the
           longer navbar labels pushed the row up to 142px past the card edge.
           Wrapping on content keeps every item inside the card at any width. */
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        height: auto;
        row-gap: 2.2cqi;
        column-gap: 3.2cqi;
    }

    .service-checkbox {
        font-family: 'Inter', sans-serif;
        font-weight: 500;
        font-size: 4.1801cqi;
        /* 13px at the 311px reference width, scales with the card so the
           row never overflows on narrow phones */
        line-height: 1.54;
        letter-spacing: 0.01em;
        color: #1B3834;
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
        width: auto !important;
        text-align: left !important;
    }

    .service-checkbox.selected {
        color: #FFA726;
    }

    /* --- Message textarea --- */
    .form-row.message-row {
        margin-top: 8px;
        /* was 16px (12px gap + 16px = 28px total) - trimmed for viewport fit */
        order: 7;
    }

    .message-group .form-control-custom {
        width: 100% !important;
        height: 65px;
        /* was 93px (Figma: h-93) - trimmed for viewport fit; still room
           for a couple of lines of text */
        padding: 12px 19px;
        resize: none;
        font-size: 12px;
    }

    /* --- Send button: Figma 180×40px --- */
    .btn-send-message {
        margin-top: 8px;
        /* was 16px (12px gap + 16px = 28px total) - trimmed for viewport fit */
        order: 8;
        width: 180px;
        height: 40px;
        background: #263238;
        border-radius: 55px;
        justify-content: flex-start;
        padding-left: 7px;
    }

    .btn-send-message .icon-circle {
        width: 24px;
        height: 24px;
        background: #FFA726;
        border-radius: 24px;
    }


    .btn-send-message .btn-text {
        font-family: 'Inter', sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
        letter-spacing: 0.01em;
        color: #FFFFFF;
        margin-left: 10.53px;
    }

    /* --- Mobile bottom bar --- */
    .mobile-contact-footer {
        display: flex !important;
        width: 100%;
        background: #263238;
        border-radius: 0 0 17px 17px;
        padding: 13px 22px;
        box-sizing: border-box;
    }

    .mobile-footer-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .mobile-footer-item {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-footer-item span {
        font-family: 'Inter', sans-serif;
        font-weight: 400;
        font-size: 10px;
        line-height: 29px;
        letter-spacing: 0.01em;
        color: #FFFFFF;
    }

    .mobile-footer-icon {
        width: 12px;
        height: 12px;
        object-fit: contain;
        /* Office.png/Call.png are already the orange Figma icons - forcing
           them white here doesn't match the design. */
    }

    /* --- Contact logo (desktop version hidden, mobile header used instead) --- */
    .contact-logo {
        display: none;
    }
}

/* =========================================================
   MOBILE MODAL - HEIGHT-RESPONSIVE SIZING
   The block above was tuned tight enough to fit the shortest phone tested
   (320x568, iPhone SE) without scrolling - correct there, but it left the
   exact same compact card on every taller phone too, even ones with 250px+
   of untouched spare room (844-932px viewports), which looked cramped for
   no reason. These two tiers restore more of the original Figma spacing as
   height allows, capped so no tier can overflow at its own lowest bound
   (verified against this project's 8 standard test sizes:
   320x568/360x640/375x667/360x740/390x844/412x915/414x896/430x932). The
   12px field-to-field gap (client-requested exact value) is intentionally
   left alone in every tier - only the *other* spacing grows.
   ========================================================= */
@media (max-width: 767px) and (min-height: 620px) {
    .contact-modal-overlay {
        padding: 12px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .contact-modal-right {
        padding: 34px 20px 18px;
    }

    .mobile-contact-header {
        gap: 10px;
        margin-bottom: 16px;
    }

    .form-row.message-row {
        margin-top: 12px;
    }

    .btn-send-message {
        margin-top: 12px;
    }

    .message-group .form-control-custom {
        height: 82px;
        padding: 14px 19px;
    }
}

@media (max-width: 767px) and (min-height: 780px) {
    .contact-modal-overlay {
        padding: 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .contact-modal-right {
        padding: 38px 20px 20px;
        /* back to the original Figma pt-38 px-20 pb-20 */
    }

    .mobile-contact-header {
        gap: 12px;
        margin-bottom: 20px;
        /* back to the original Figma gap-20 */
    }

    .form-row.message-row {
        margin-top: 16px;
    }

    .btn-send-message {
        margin-top: 16px;
    }

    .message-group .form-control-custom {
        height: 93px;
        /* back to the original Figma h-93 */
        padding: 15px 19px;
    }
}
/* SEO heading structure (2026-09-29): inside the popup on other pages the "Contact The Team" titles are <div>s
   (js/contact-modal.js) - give them the heading defaults the old <h2> had (Bootstrap h2 + theme heading font), at
   tag-level priority so the .contact-title / .mobile-contact-title rules still win exactly as before. */
div:where(.contact-title, .mobile-contact-title) {
  margin-top: 0;
  margin-bottom: .5rem;
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.2;
  font-size: calc(1.325rem + .9vw);
  color: var(--bs-heading-color, inherit);
}

@media (min-width: 1200px) {
  div:where(.contact-title, .mobile-contact-title) {
    font-size: 2rem;
  }
}

/* Tappable phone / email in the popup (tel: / mailto:). The link sits inside
   the original span and looks exactly like the text it wraps - same colour,
   font and size, no underline - in every state (Bootstrap would otherwise
   paint links blue + underlined). */
#contactModal a.contact-tap,
#contactModal a.contact-tap:hover,
#contactModal a.contact-tap:focus,
#contactModal a.contact-tap:active,
#contactModal a.contact-tap:visited {
    color: inherit !important;
    font: inherit !important;
    letter-spacing: inherit !important;
    text-decoration: none !important;
}

/* Contact popup phone + email: show they are clickable (2026-10-02). Same colour and font as before.
   Web (mouse): underline on hover / keyboard focus. Phones + tablets (touch, no hover): always a thin underline,
   since a finger cannot hover. */
#contactModal a.contact-tap {
    cursor: pointer;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
}

@media (hover: hover) {
    #contactModal a.contact-tap:hover,
    #contactModal a.contact-tap:focus-visible {
        text-decoration: underline !important;
    }
}

@media (hover: none) {
    #contactModal a.contact-tap,
    #contactModal a.contact-tap:visited,
    #contactModal a.contact-tap:active {
        text-decoration: underline !important;
    }
}

/* =========================================================
   TABLET (768-1101px, upright and lying flat) - 2026-10-09
   The card is a fixed 1102x760 design scaled down with transform. Below
   1102px wide the flex wrapper first SHRANK the card to the screen width,
   then the scale shrank it again, so the right side of the form (Last
   Name, Phone, part of the services list) was cut off. Keep the card at
   its design size and scale it to fit instead - same look as on web.
   Only 768-1101px is touched: desktop (the card already fits from 1102px)
   and phones (own layout below 768px / short screens) are unchanged.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1101.98px) and (min-height: 501px) {
    .contact-modal-container {
        flex-shrink: 0;
    }
}

/* scale so 1102px fits with a margin each side */
@media (min-width: 768px) and (max-width: 859.98px) and (min-height: 501px) {
    .contact-modal-container {
        transform: scale(0.66);
    }
}

@media (min-width: 860px) and (max-width: 1001.98px) and (min-height: 501px) {
    .contact-modal-container {
        transform: scale(0.75);
    }
}

@media (min-width: 1002px) and (max-width: 1101.98px) and (min-height: 501px) {
    .contact-modal-container {
        transform: scale(0.8);
    }
}

/* short screens keep the existing smaller scale (repeated here so the
   width steps above don't override it) */
@media (min-width: 768px) and (max-width: 1101.98px) and (max-height: 650px) and (min-height: 501px) {
    .contact-modal-container {
        transform: scale(0.65);
    }
}