/* One photographic enquiry composition, using the existing site palette.
   The original footer is styled exclusively by styles.css. */
#contact.site-contact {
    --contact-bg: #071019;
    --contact-text: #e9e3da;
    --contact-accent: #c6a87c;
    --contact-accent-light: #dec39d;
    --contact-muted: #bfb7aa;
    --contact-line: #686b69;
    color-scheme: dark;
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(72px, 7vw, 104px) 0;
    border: 0;
    border-radius: 0;
    background: var(--contact-bg);
    color: var(--contact-text);
    font-family: var(--font-body);
    box-shadow: none;
    scroll-margin-top: 96px;
}
#contact.site-contact::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    background: url('/images/corporate-contact-casefile-1536.webp') left bottom / auto 100% no-repeat;
    mask-image: linear-gradient(to right, #000 0%, #000 24%, transparent 58%);
    opacity: .76;
    pointer-events: none;
}
#contact.site-contact::after { content: none; }
#contact.site-contact > .container {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: clamp(24px, 4.167vw, 60px);
}
#contact.site-contact .site-contact-anchor { position: absolute; top: 0; scroll-margin-top: 96px; }
#contact.site-contact .site-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "heading form" "channels form";
    align-items: start;
    gap: 32px clamp(48px, 6vw, 88px);
}
#contact.site-contact .site-contact-heading { grid-area: heading; min-width: 0; }
#contact.site-contact .site-contact-copy { grid-area: channels; align-self: end; min-width: 0; padding-bottom: 32px; }
#contact.site-contact .site-contact-title {
    max-width: 12ch;
    margin: 0;
    color: var(--contact-text);
    font: 500 clamp(2.75rem, 4.8vw, 4.5rem)/1.02 var(--font-heading);
    letter-spacing: -.025em;
    text-align: left;
    text-wrap: balance;
}
#contact.site-contact .site-contact-description {
    max-width: 36ch;
    margin: 26px 0 0;
    color: var(--contact-muted);
    font-size: 1rem;
    line-height: 1.65;
    text-align: left;
}
#contact.site-contact .site-contact-form-shell {
    grid-area: form;
    min-width: 0;
    padding: 36px;
    border-inline-start: 1px solid rgba(198, 168, 124, .24);
    background: rgba(13, 25, 34, .9);
    scroll-margin-top: 112px;
}
#contact.site-contact .site-contact-form { display: grid; gap: 28px; margin: 0; }
#contact.site-contact .site-contact-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}
#contact.site-contact .site-contact-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#contact.site-contact .site-contact-field--message { grid-column: 1 / -1; }
#contact.site-contact .site-contact-field label {
    margin: 0;
    color: var(--contact-text);
    font: 500 .875rem/1.5 var(--font-body);
}
#contact.site-contact .form-input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    margin: 0;
    padding: 13px 12px;
    border: 0;
    border-bottom: 1px solid var(--contact-line);
    border-radius: 0;
    background: rgba(4, 12, 18, .4);
    color: var(--contact-text);
    caret-color: var(--contact-text);
    font: 400 1rem/1.45 var(--font-body);
    box-shadow: none;
    scroll-margin-top: 112px;
    transition: border-color 160ms ease, background-color 160ms ease;
}
#contact.site-contact textarea.form-input { min-height: 124px; resize: vertical; }
#contact.site-contact .form-input:hover { border-color: #969185; }
/* An inset half-pixel rule adds no outer frame, glow, or change in field size. */
#contact.site-contact .form-input:focus,
#contactModal .contact-dialog-body .form-input:focus,
#blog-search.blog-search-field:focus {
    border-color: transparent;
    outline: 0;
    box-shadow: inset 0 0 0 .5px rgba(198, 168, 124, .8);
}
#contact.site-contact .form-input:focus { background: rgba(4, 12, 18, .4); }
#contactModal .contact-dialog-body .form-input:focus { background: #071119; }
#blog-search.blog-search-field:focus { background: rgba(5, 10, 16, .8); }
#contactModal .contact-dialog-body .form-input:user-invalid { border-color: #ffbfb0; }
/* A compact, centered action on wider dialogs; an easy full-width tap on phones. */
#contactModal .contact-modal-actions .btn-submit {
    width: max-content;
    min-width: 220px;
    max-width: 100%;
    justify-content: center;
    padding-inline: 28px;
}
#contactModal .contact-modal-actions .btn-submit > svg { display: none; }
@media (max-width: 640px) {
    #contactModal .contact-modal-actions .btn-submit { width: 100%; min-width: 0; }
}
@media (forced-colors: active) {
    #contact.site-contact .form-input:focus,
    #contactModal .contact-dialog-body .form-input:focus,
    #blog-search.blog-search-field:focus {
        outline: 1px solid Highlight;
        outline-offset: 2px;
    }
}
#contact.site-contact .form-input:user-invalid { border-color: #ffd1c6; }
#contact.site-contact .form-input:autofill { color: var(--contact-text); background: #14212e; }
#contact.site-contact .form-input:-webkit-autofill { -webkit-text-fill-color: var(--contact-text); box-shadow: 0 0 0 1000px #14212e inset; }
#contact.site-contact .site-contact-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 204px;
    min-height: 52px;
    margin: 0;
    padding: 14px 24px;
    border: 1px solid var(--contact-accent);
    border-radius: 0;
    background: var(--contact-accent);
    color: #09131d;
    font: 500 .9375rem/1.4 var(--font-body);
    text-align: center;
    cursor: pointer;
    transition: background-color 160ms ease;
}
#contact.site-contact .site-contact-submit:hover { background: var(--contact-accent-light); }
#contact.site-contact .site-contact-submit:disabled { background: #a38e70; opacity: 1; cursor: wait; }
#contact.site-contact .site-contact-privacy {
    margin: -6px 0 0;
    padding: 0;
    max-width: 62ch;
    color: var(--site-text-body, #d2ccc2);
    font: 400 .8125rem/1.6 var(--font-body);
    text-align: left;
}
#contact.site-contact .site-contact-privacy a {
    display: inline;
    margin: 0;
    color: inherit;
    font: inherit;
    white-space: normal;
    text-decoration: underline;
    text-underline-offset: 3px;
}
#contactModal .contact-dialog-body .contact-modal-privacy {
    color: var(--site-text-body, #d2ccc2);
}

/* One restrained text row: familiar names, generous hit areas, no tiles. */
#contact.site-contact .site-channel-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#contact.site-contact .site-channel-list > li { position: relative; display: flex; min-width: 0; margin: 0; padding: 0; list-style: none; }
#contact.site-contact .site-channel-list > li::before { content: none; }
#contact.site-contact .site-channel-list > li + li::before { content: ''; position: absolute; left: -15px; top: calc(50% - 1px); width: 2px; height: 2px; border-radius: 50%; background: var(--contact-accent); }
#contact.site-contact .site-channel-list .channel-link {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: auto;
    min-height: 44px;
    margin: 0;
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--contact-accent-light);
    font: 500 .875rem/1.4 var(--font-body);
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    text-decoration: none;
    text-underline-offset: 5px;
    box-shadow: none;
    transform: none;
}
#contact.site-contact .site-channel-list .channel-link:hover { color: var(--contact-text); text-decoration: underline; background: none; }
#contact.site-contact :is(a, button):focus-visible { outline: 2px solid var(--contact-accent-light); outline-offset: 3px; }
#contact.site-contact .site-contact-success h3 { margin: 0 0 12px; color: var(--contact-text); font: 500 2rem/1.2 var(--font-heading); }
#contact.site-contact .site-contact-success p { color: var(--contact-muted); }
#contact.site-contact .site-contact-success p,
#contact.site-contact .site-contact-error { margin: 0; font: 400 1rem/1.6 var(--font-body); }
#contact.site-contact .site-contact-error { margin-top: 20px; color: #ffd1c6; }
#contact.site-contact [hidden] { display: none !important; }
@media (max-width: 1100px) {
    body[data-contact-call-managed] .header .floating-call {
        display: inline-flex !important;
        position: static;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        min-height: 44px;
        margin: 0 8px 0 0;
        padding: 0;
        border: 0;
        border-radius: 6px;
        background: transparent;
        box-shadow: none;
    }
    body[data-contact-call-managed] .header .floating-call svg {
        width: 20px;
        height: 20px;
        stroke-width: 1.5;
    }
    body[data-contact-call-managed] .header .floating-call:hover,
    body[data-contact-call-managed] .header .floating-call:focus-visible {
        background: rgba(198, 168, 124, .08);
        color: var(--color-accent-light);
        transform: none;
    }
}
@media (max-width: 900px) {
    #contact.site-contact::before {
        background-position: left top;
        background-size: auto 520px;
        mask-image: linear-gradient(to bottom, #000, transparent 560px);
        opacity: .5;
    }
    #contact.site-contact .site-contact-grid {
        max-width: 680px;
        margin-inline: auto;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas: "heading" "form" "channels";
        gap: 28px;
    }
    #contact.site-contact .site-contact-title { max-width: 20ch; }
    #contact.site-contact .site-contact-description { max-width: 52ch; }
    #contact.site-contact .site-contact-form-shell { padding: 28px; border-inline-start: 0; border-top: 1px solid rgba(198, 168, 124, .24); }
    #contact.site-contact .site-contact-copy { padding-bottom: 0; }
}
@media (max-width: 600px) {
    #contact.site-contact { padding: 56px 0; }
    #contact.site-contact > .container { padding-inline: 20px; }
    #contact.site-contact .site-contact-title { max-width: none; font-size: 2.5rem; }
    #contact.site-contact .site-contact-description { margin-top: 16px; }
    #contact.site-contact .site-contact-fields { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    #contact.site-contact .site-contact-field { gap: 10px; }
    #contact.site-contact .site-contact-field label { font-weight: 600; }
    #contact.site-contact .form-input {
        min-height: 56px;
        padding: 15px 14px;
        border: 1px solid #647079;
        border-radius: 4px;
        background: #0d1922;
    }
    #contact.site-contact textarea.form-input { min-height: 144px; }
    #contact.site-contact .form-input:hover { border-color: #92988f; }
    #contact.site-contact .form-input:focus { border-color: transparent; background: #0d1922; }
    #contact.site-contact .form-input:user-invalid { border-color: #ffd1c6; }
    #contact.site-contact .site-contact-submit { width: 100%; min-height: 54px; border-radius: 4px; }
    #contact.site-contact .site-contact-form-shell { padding: 24px 0 0; background: transparent; scroll-margin-top: 96px; }
    #contact.site-contact .site-contact-copy { padding-top: 4px; }
    #contact.site-contact .site-channel-list { justify-content: flex-start; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) { #contact.site-contact :is(.site-contact-submit, .form-input) { transition: none; } }
@media print { #contact.site-contact { display: none; } }

/* Match ordinary-page text roles without altering the shared form layout. */
@media screen {
    body:is(.home-page, .practice-template-page, .fees-page, .online-consultation-page, .expert-profile-page, .blog-list-page) #contact.site-contact {
        --contact-text: var(--site-text-heading, #e9e3da);
        --contact-muted: var(--site-text-secondary, #bfb7aa);
        --contact-accent: var(--site-gold, #c6a87c);
    }
    body:is(.home-page, .practice-template-page, .fees-page, .online-consultation-page, .expert-profile-page, .blog-list-page) #contact.site-contact .site-contact-description {
        color: var(--site-text-body, #d2ccc2);
        font-size: 1rem;
        line-height: 1.65;
    }
    body:is(.home-page, .practice-template-page, .fees-page, .online-consultation-page, .expert-profile-page, .blog-list-page) #contact.site-contact .site-contact-privacy { font-size: .875rem; }
}