/* --- Info column + form panel (753:1447) --------------------------------- */
.contact-panel {
    display: flex;
    align-items: center;
    min-height: 845px;
    /* Figma 753:1447 leaves 128px above the panels and 127 below. The build only
       had `min-height: 845px` with centred content, so once the live Gravity Form
       rendered taller than the design's 590px panel the breathing room collapsed
       to 4px (client round 23). Padding makes the rhythm explicit and the section
       grows with the form instead of squeezing against it. */
    padding-block: 128px 127px;
    background: var(--bg, #ffffff);
}

/* The inner row carried no side gutter, so above 1400px its content ran to the
   very edge of the viewport while every other page starts at the gutter. It now
   wears the shared `.container` primitive (see the markup) rather than
   re-implementing the cap and padding — re-implementing it left the panel on
   `--gutter` (20px) below 576px while every `.container` switches to
   `--gutter-mobile` (24px), a 4px drift the review caught (client round 21). */
.contact-panel-inner {
    display: grid;
    grid-template-columns: minmax(0, 495px) minmax(0, 1205px);
    /* The info column starts level with the top of the form box (client round 24).
       It used to centre against a panel that is now much taller than the design's
       590px, which left the heading floating halfway down. */
    align-items: start;
    justify-content: center;
    gap: 53px;
}

/* Figma's MAX on this container is the vertical axis (bottom-aligned); the
   horizontal axis is unset, so the column fills its 495px cell from the left. */
.contact-panel .info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
}

.contact-panel .details {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* The panel heading carries the hero copy since it moved here (CCD-29/32). It
   was an <h1>, but the shared hero block still emits one on this page (hidden
   by .page-hero-inner{display:none}), so the markup shipped two — demoted to
   <h2> in the QC audit, 2026-09-08. Sizing is unchanged.
   Figma's 44/64 = 0.6875 was a single-line value for the old "Contact Info"
   label; the sentence that replaced it wraps to three lines in this 495px
   column, where a line box shorter than the font overlaps its own glyphs. */
.contact-panel h2 {
    margin: 0;
    font-size: clamp(32px, 3.33vw, 64px);
    line-height: 1.234;
    color: var(--brand, #008AF7);
}

.contact-panel .lines {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-panel .lines li {
    display: flex;
    align-items: center;
    gap: 18px;
}

.contact-panel .lines .cnm-icon {
    flex: none;
    width: 26px;
    height: 46px;
    color: var(--brand, #008AF7);
}

.contact-panel .lines a {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3889; /* 25/18 */
    color: var(--ink, #212529);
}

.contact-panel .lines a:hover,
.contact-panel .lines a:focus-visible {
    color: var(--brand, #008AF7);
}

.contact-panel .staff {
    display: flex;
    flex-direction: column;
    gap: 27px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-panel .staff p {
    margin: 0;
    font-size: 18px;
    line-height: 1.4444;
    color: var(--muted, #909091);
}

.contact-panel .staff .name {
    font-weight: 900;
}

.contact-panel .staff a {
    color: inherit;
}

.contact-panel .staff a:hover,
.contact-panel .staff a:focus-visible {
    color: var(--brand, #008AF7);
}

/* Light grey brand mark sitting below the staff list. */
.contact-panel .watermark {
    width: 61px;
    height: 57px;
    background-color: var(--light, #E8E8E8);
    -webkit-mask-image: url("../img/logo-mark.svg");
    mask-image: url("../img/logo-mark.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.contact-panel .form-panel {
    min-height: 590px;
    /* Figma 753:1447 draws this box with asymmetric padding — 80 top / 65 right /
       79 bottom / 66 left — which the build copied verbatim. Client asked for one
       value on all four sides (round 24). */
    padding: 66px;
    border-radius: 26px;
    background: rgba(217, 217, 217, 0.24);
}

.contact-panel .form-placeholder {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    font-size: 18px;
    line-height: 1.4444;
    color: var(--muted, #909091);
}

.contact-panel .form-placeholder span {
    font-size: 16px;
}

/* ---------------------------------------------------------------------------
 * Gravity Forms — styled to the Figma form panel (753:1749). Two rows of three
 * fields (477 / 300 / 300 with a 20px gutter inside a 1117px row), then a
 * full-width message, then the outlined CTA.
 * ------------------------------------------------------------------------- */
.contact-panel .gform_wrapper form {
    margin: 0;
}

.contact-panel .gform_wrapper .gform_fields {
    display: grid;
    grid-template-columns: minmax(0, 477fr) minmax(0, 300fr) minmax(0, 300fr);
    gap: 24px 20px;
}

/* Gravity Forms' orbital theme sets `.gfield { grid-column: 1 / -1 }` and its
   stylesheet loads after the theme's, so every field spanned the whole row and
   the Figma's three-up layout never appeared. These selectors carry one more
   class than the plugin's so the cascade lands our way without !important
   (client round 21). Fields flow three per row; the message spans the row. */
.contact-panel .form-panel .gform_wrapper .gform_fields > .gfield {
    grid-column: span 1;
}

.contact-panel .form-panel .gform_wrapper .gform_fields > .gfield:has(textarea) {
    grid-column: 1 / -1;
}

.contact-panel .gform_wrapper .gfield {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* A composite field (name, address) is a <fieldset> labelled by a <legend>, and a
   legend is not a flex item — so the gap above has only one item to sit between
   and never applies, rendering those inputs 12px above every sibling field's.
   Restore it explicitly so the Name/Email/Phone row lines up. */
.contact-panel .gform_wrapper .gfield > legend + .ginput_container {
    margin-top: 12px;
}

.contact-panel .gform_wrapper .gfield_label {
    margin: 0;
    font-family: var(--sans, system-ui, sans-serif);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.3333;
    color: var(--ink, #212529);
}

.contact-panel .gform_wrapper .gfield_required {
    color: var(--brand, #008AF7);
}

.contact-panel .gform_wrapper input[type="text"],
.contact-panel .gform_wrapper input[type="email"],
.contact-panel .gform_wrapper input[type="tel"],
.contact-panel .gform_wrapper select,
.contact-panel .gform_wrapper textarea {
    width: 100%;
    height: 54px;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    background: #D9D9D9;
    font-family: var(--sans, system-ui, sans-serif);
    font-size: 18px;
    line-height: 1.4444;
    color: var(--ink, #212529);
}

.contact-panel .gform_wrapper textarea {
    height: 140px;
    padding: 16px;
    resize: vertical;
}

.contact-panel .gform_wrapper input:focus-visible,
.contact-panel .gform_wrapper select:focus-visible,
.contact-panel .gform_wrapper textarea:focus-visible {
    outline: 2px solid var(--brand, #008AF7);
    outline-offset: 2px;
}

.contact-panel .gform_wrapper .gform_footer {
    margin: 67px 0 0;
    padding: 0;
}

/* Gravity Forms 2.8+ paints its controls from design tokens, so the submit
   button ignored our colours no matter the selector — it reads
   `--gf-ctrl-btn-*`. Setting the tokens is the supported way in, and it keeps
   hover/focus consistent with .btn-layout.hollow (client round 21). */
.contact-panel .form-panel .gform_wrapper {
    --gf-ctrl-btn-bg-color-primary: transparent;
    --gf-ctrl-btn-color-primary: var(--brand, #008AF7);
    --gf-ctrl-btn-border-color-primary: var(--brand, #008AF7);
    --gf-ctrl-btn-bg-color-hover-primary: var(--brand, #008AF7);
    --gf-ctrl-btn-color-hover-primary: var(--white, #ffffff);
    --gf-ctrl-btn-border-color-hover-primary: var(--brand, #008AF7);
    --gf-ctrl-btn-bg-color-focus-primary: var(--brand, #008AF7);
    --gf-ctrl-btn-color-focus-primary: var(--white, #ffffff);
    --gf-ctrl-btn-border-color-focus-primary: var(--brand, #008AF7);
    /* Geometry comes from the same token set: the Figma CTA is a 2px outline,
       18px/900 type, 35px of horizontal padding and a 60px tall pill. */
    --gf-ctrl-btn-border-width-primary: 2px;
    --gf-ctrl-btn-font-size: 18px;
    --gf-ctrl-btn-font-weight: 900;
    --gf-ctrl-btn-padding-x: 35px;
    --gf-ctrl-btn-size: 60px;
    /* The submit renders at the "md" step, which reads its own tokens. */
    --gf-ctrl-btn-font-size-md: 18px;
    --gf-ctrl-btn-padding-x-md: 35px;
    --gf-ctrl-btn-size-md: 60px;
    --gf-ctrl-btn-radius: var(--radius, 3px);
    --gf-ctrl-btn-shadow: none;
    --gf-ctrl-btn-shadow-hover: none;
    --gf-ctrl-btn-shadow-focus: none;
}

/* Matches .btn-layout.hollow — outlined blue with the leading arrow. */
.contact-panel .form-panel .gform_wrapper .gform_footer .gform_button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 17px 35px;
    border: 2px solid var(--brand, #008AF7);
    border-radius: var(--radius, 3px);
    background: transparent;
    font-family: var(--sans, system-ui, sans-serif);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.3333;
    color: var(--brand, #008AF7);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.contact-panel .form-panel .gform_wrapper .gform_footer .gform_button:hover,
.contact-panel .form-panel .gform_wrapper .gform_footer .gform_button:focus-visible {
    background: var(--brand, #008AF7);
    color: var(--white, #ffffff);
    transform: translateY(-1px);
}

.contact-panel .gform_wrapper .gform_validation_errors {
    margin-bottom: 24px;
    color: var(--ink, #212529);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1399px) {
    .contact-panel-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: 40px;
    }

    /* Same 66px the client set for the desktop box — this band covers the common
       1200-1399 laptop widths, where the old 48px step made the request look
       unapplied (client round 24). The 32px step at ≤991 stays: 66px would eat a
       third of a phone's width. */
    .contact-panel .form-panel {
        padding: 66px;
    }
}

@media (max-width: 991px) {
    /* Asymmetric on purpose below 992px. The Contact Locations block that
       follows this section carries no top padding of its own, so this bottom
       value IS the gap above the addresses, and 64px of it read as dead space
       over a three-line address at phone width (client round 26). The addresses
       block trims its own bottom padding to 32px to match. Remove that block
       from the page and this should go back to a symmetric 64px. */
    .contact-panel {
        min-height: 0;
        padding-block: 64px 32px;
    }

    /* One column follows DOM order, which buried the form under the address and
       staff blocks — the same above-the-fold problem CCD-29 fixed on desktop.
       Flattening the two wrapper divs makes their children grid items, so the form
       can sit right under the heading. `gap` is restated because `display: contents`
       dissolves the wrappers' own 48px/40px gaps along with their boxes. */
    .contact-panel .info,
    .contact-panel .details {
        display: contents;
    }

    .contact-panel-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .contact-panel #contact-heading {
        order: 1;
    }

    .contact-panel .form-panel {
        order: 2;
        min-height: 0;
        padding: 32px;
    }

    .contact-panel .lines {
        order: 3;
    }

    .contact-panel .staff {
        order: 4;
    }

    /* Hidden below 992px rather than ordered last. The mobile reorder dropped
       this decorative mark between the staff list and the Contact Locations
       block, where 57px of #E8E8E8 logo on a white ground reads as dead space
       instead of as a mark — and together with the grid gap above it, that was
       the bulk of the gap the client reported over the addresses (client round
       26). It keeps its designed place on desktop, under the staff list. Safe
       to drop: the markup already carries aria-hidden. */
    .contact-panel .watermark {
        display: none;
    }

    .contact-panel .gform_wrapper .gform_fields {
        grid-template-columns: 1fr;
    }

    .contact-panel .gform_wrapper .gform_footer {
        margin-top: 32px;
    }
}