/* ==========================================================================
   CONTACT US

   The details on the left, the enquiry form on the right, and the technical
   support band below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The two columns

   The form gets the wider half, because it is the thing the page is for.
   -------------------------------------------------------------------------- */

.nex-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-24);
    align-items: start;
}

.nex-contact-intro {
    margin: 0 0 var(--space-16);
    color: var(--ink);
    line-height: 1.7;
}

/* The design underlines this heading with a rule the full width of the column
   and puts a small coral mark at the right hand end of it. */
.nex-contact-subheading {
    position: relative;
    margin: 0 0 var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--brand-light);
    color: var(--brand-light);
    font-family: var(--font-display);
    font-size: var(--size-xl);
    font-weight: var(--weight-normal);
}

.nex-contact-subheading::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: calc(var(--space-4) - 7px);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
}

/* --------------------------------------------------------------------------
   2. The telephone, email and address

   Each line carries the small coral ring the design draws beside it. Drawn
   rather than a picture file, so it needs nothing exported and stays sharp.
   -------------------------------------------------------------------------- */

.nex-contact-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nex-contact-list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    color: var(--ink);
    line-height: 1.6;
}

.nex-contact-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: -3px;
    border-radius: 50%;
    border: 1px solid var(--accent);
    color: var(--accent);
}

.nex-contact-icon svg {
    width: 15px;
    height: 15px;
}

/* The service address is long enough to run out past the edge of the panel on
   a phone, and a flex child will not shrink below its own content unless it is
   told it may, so it is told both things here. */
.nex-contact-list a {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--ink);
    text-decoration: none;
}

.nex-contact-list a:hover,
.nex-contact-list a:focus,
.nex-contact-list a:focus-visible {
    color: var(--brand-light);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The two support lines sit side by side rather than stacked. */
.nex-contact-list--inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-block: var(--space-6);
}

.nex-contact-list--inline .nex-contact-list__item {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   3. The form

   Two fields to a row, the message across the full width. The boxes are the
   design's soft grey with no border, which is why they need a visible focus
   ring: without one, somebody using a keyboard cannot tell which box they are
   in.
   -------------------------------------------------------------------------- */

.nex-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.nex-form-field {
    margin: 0 0 var(--space-6);
}

.nex-form-field label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--ink);
    font-size: var(--size-sm);
}

.nex-form-required {
    color: var(--accent);
}

.nex-form-field input,
.nex-form-field select,
.nex-form-field textarea {
    width: 100%;
    padding: var(--space-4) var(--space-6);
    border: 1px solid transparent;
    border-radius: var(--radius-large);
    background: #e9e9e9;
    color: var(--ink);
    font-family: inherit;
    font-size: var(--size-base);
    line-height: 1.5;
}

.nex-form-field textarea {
    min-height: 9rem;
    resize: vertical;
}

.nex-form-field input::placeholder,
.nex-form-field textarea::placeholder {
    color: var(--ink-soft);
    opacity: 0.75;
}

.nex-form-field input:focus,
.nex-form-field select:focus,
.nex-form-field textarea:focus {
    outline: none;
    border-color: var(--brand-light);
    background: var(--page);
    box-shadow: 0 0 0 3px rgba(0, 168, 176, 0.22);
}

/* --------------------------------------------------------------------------
   4. The consent tick and the button
   -------------------------------------------------------------------------- */

.nex-form-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin: var(--space-4) 0 var(--space-8);
}

.nex-form-consent input {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    accent-color: var(--brand-light);
}

.nex-form-consent label {
    color: var(--ink);
    font-size: var(--size-sm);
    line-height: 1.6;
}

.nex-form-consent a,
.nex-form-consent strong {
    color: var(--ink);
    font-weight: var(--weight-bold);
}

.nex-form-submit {
    width: 100%;
    justify-content: center;
    border: none;
    font-size: var(--size-base);
    cursor: pointer;
}

/* The field no human fills in. Off screen rather than hidden, so that anything
   reading the markup cannot tell it apart from a real one. */
.nex-form-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.nex-form-error {
    margin: 0 0 var(--space-6);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-large);
    background: rgba(179, 38, 30, 0.08);
    color: var(--error);
    font-size: var(--size-sm);
}

/* --------------------------------------------------------------------------
   5. What replaces the form once it has been sent
   -------------------------------------------------------------------------- */

.nex-contact-sent {
    padding: var(--space-12) var(--space-8);
    border-radius: var(--radius-large);
    background: linear-gradient(160deg, var(--band-pale) 0%, var(--band-deep) 100%);
}

.nex-contact-sent h2 {
    margin: 0 0 var(--space-4);
    color: var(--brand);
    font-family: var(--font-display);
    font-size: var(--size-xl);
    font-weight: var(--weight-normal);
}

.nex-contact-sent p {
    margin: 0;
    color: var(--ink);
    line-height: 1.7;
}

.nex-contact-note {
    color: var(--ink);
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   6. Technical support

   The wording on the left with the photograph bleeding off the right hand edge
   of the band, which is how the design draws it. The photograph is cut off by
   the band rather than being a shape of its own, so it is positioned rather
   than laid out in a column.
   -------------------------------------------------------------------------- */

/* Chad, 3 September, measured off the design export: this is a floating
   rounded panel inset from the edges like the footer, not the square full
   width strip "What we do" uses, and its mint is not flat. It fades out to
   the page's own white from left to right, which is what lets the white
   laptop in the photograph sit on it without reading as a patch.

   No bottom margin: the footer's own --card-gap above it sets the space
   between the two panels, so there is one value doing that job rather than
   two adding up.

   Nothing here clips: the man stands on the panel's bottom edge and leans
   out over the top of it, and an "overflow: hidden" for the sake of the
   rounded corners would cut his head off. */
.nex-support {
    position: relative;
    margin: var(--space-band) var(--gutter-bleed) 0;
    border-radius: var(--radius-large);
    background: linear-gradient(90deg, var(--band-deep) 0%, var(--page) 100%);
}

/* The photograph is measured against the panel, not against the column of
   wording, because the design runs it out to the panel's own right edge
   rather than stopping it where the text stops. */

/* Wide enough for the service line and the service address to sit side by
   side on one line, which is how the design draws them. At 46rem they wrapped
   onto two, and the panel came out taller than the design because of it.

   Chad, 3 September: the wording sits above the photograph, not under it.
   The photograph is positioned and the wording is not, which on its own puts
   the photograph on top, and on a narrower screen the laptop then covered the
   service address. Positioning the wording too, after it in the markup, puts
   it back on top where it belongs. */
.nex-support-body {
    position: relative;
    z-index: 1;
    width: min(100%, 54rem);
}

.nex-support-body p {
    margin: 0 0 var(--space-4);
    color: var(--ink);
    line-height: 1.7;
}

.nex-support-body .nex-heading--plain {
    margin-bottom: var(--space-8);
}

/* The photograph is a cut out with no background of its own. He stands on the
   bottom edge of the panel and leans out over the top of it, which is how the
   design draws it, so he reads as leaning out of the panel rather than sitting
   in a box inside it.

   The height is what sizes him, measured off the design: 114% of the panel, so
   the extra 14% is the part of him above its top edge. He keeps the same
   relationship to the panel whatever the wording beside him does.

   Chad, 3 September: an automatic width alongside that fixed height squashed
   him out of shape, because when the width cap took over it shrank the box
   without the height following. A real width plus object-fit means the cap can
   only ever make him smaller, never a different shape. */
.nex-support-photo {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 114%;
    width: 52%;
    object-fit: contain;
    object-position: right bottom;
    display: block;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   7. Smaller screens
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .nex-contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-16);
    }

    /* The photograph has nowhere to bleed into once the band is a phone wide,
       and shrunk into a corner it is just clutter. */
    .nex-support-photo {
        display: none;
    }
}

@media (max-width: 700px) {
    .nex-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .nex-contact-list--inline {
        display: block;
    }

    .nex-contact-list--inline .nex-contact-list__item {
        margin-bottom: var(--space-6);
    }
}