/* ==========================================================================
   Section: Contact Form Panel
   Layout: contact_form_panel
   Source: pages/contact-us/figma/spec.md §3 (how_can_we_help_section) +
           pages/contact-us/figma/screenshots/how-can-we-help-section.png
   Two-column layout: centered intro heading + body, then a blue left info
   panel + a white right form column (Gravity Forms).
   ========================================================================== */

.contact-form-panel {
    padding-top: clamp(45px, calc(18.667px + 3.819vw), 92px);
    padding-bottom: clamp(45px, calc(18.667px + 3.819vw), 92px);
    background-color: var(--color-white);
    color: var(--color-text-dark);
}
/* --------------------------------------------------------------------------
   Intro (above the two-column row) — centered heading + body copy
   Figma: Playfair 43/55 centered, Aktiv 16/20 body centered, gap 33px, then
   gap between intro block and the row.
   -------------------------------------------------------------------------- */
.contact-form-panel-intro {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto clamp(35px, calc(9px + 3.385vw), 74px);
}

.contact-form-panel-intro-heading {
    color: var(--color-text-dark);
    text-align: center;
    margin: 0 0 clamp(20px, calc(11.333px + 1.128vw), 33px);
}

.contact-form-panel-intro-body p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Two-column row — grid, Figma column gap 21px.
   -------------------------------------------------------------------------- */
.contact-form-panel-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
}

.contactform-section .contact-form-panel-row{
    justify-content: center;
}
.contactform-section .contact-form-panel-right-col {
    max-width: 1050px;
    padding: 0;
}
/* --------------------------------------------------------------------------
   LEFT: Blue info panel — #045A83 bg, white text.
   Figma padding: 48px top / 86px bottom / 69px left / 49px right, gap 35px.
   -------------------------------------------------------------------------- */
.contact-form-panel-left-col {
    display: flex;
    width: 39%;
}

.contact-form-panel-left-inner {
    background-color: var(--color-brand-blue);
    color: var(--color-white);
    padding: 48px 49px 86px 69px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* gap: clamp(24px, 2.4vw, 35px); */
    width: 100%;
    height: 100%;
    align-self: start;

    /* Panel-scoped .btn-primary overrides: white bg + brand-blue text
       (matches FIND AN ATTORNEY in Figma). .btn-outline already renders
       white-on-transparent automatically via currentColor. */
    --btn-primary-bg: var(--color-white);
    --btn-primary-text: var(--color-brand-blue);
    --btn-primary-border: var(--color-white);
    --btn-primary-hover-bg: transparent;
    --btn-primary-hover-text: var(--color-white);
    --btn-primary-hover-border: var(--color-white);
}

.contact-form-panel-panel-heading {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(20px, 1.7vw, 24px);
    line-height: 1.3;
    color: var(--color-white);
    margin: 0 0 18px;
}

.contact-form-panel-panel-intro {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.5;
    color: var(--color-white);
    margin: 0;
    max-width: 352px;
}

/* Buttons — full-width white pills with brand-blue text. */
.contact-form-panel-buttons {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 27px;
	list-style: none;
	margin: 30px 0 0 0;
	padding: 0;
	width: 100%;
	max-width: 352px;
}

.contact-form-panel-buttons-item {
    display: block;
}

/* Buttons render via the global .btn / .btn-primary / .btn-outline system
   in style.css. Panel-scoped .btn-primary color overrides live on
   .contact-form-panel-left-inner above. Here we only enforce the
   full-column-width layout for buttons inside this panel. */
.contact-form-panel-buttons .btn {
    display: block;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    font-size: 14px;
}

/* Phone group — heading + big number + CALL OFFICE link */
.contact-form-panel-phone {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.5;
    color: var(--color-white);
}

.contact-form-panel-phone-link {
    color: var(--color-white);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.contact-form-panel-phone-link:hover,
.contact-form-panel-phone-link:focus,
.contact-form-panel-phone-link:visited {
    color: var(--color-white);
}

.contact-form-panel-phone-link:hover {
    opacity: 0.85;
    text-decoration: underline;
}

/* Disclaimer + media inquiry copy — small white body text with mailto anchors */
.contact-form-panel-disclaimer,
.contact-form-panel-media-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-white);
    max-width: 100%;
    margin: 30px 0 0 0;
    width: 100%;
}

.contact-form-panel-disclaimer p,
.contact-form-panel-media-body p {
    margin: 0 0 12px;
}

.contact-form-panel-disclaimer p:last-child,
.contact-form-panel-media-body p:last-child {
    margin-bottom: 0;
}

.contact-form-panel-disclaimer a,
.contact-form-panel-media-body a {
    color: var(--color-white);
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.contact-form-panel-disclaimer a:hover,
.contact-form-panel-disclaimer a:focus,
.contact-form-panel-disclaimer a:visited,
.contact-form-panel-media-body a:hover,
.contact-form-panel-media-body a:focus,
.contact-form-panel-media-body a:visited {
    color: var(--color-white);
}

.contact-form-panel-disclaimer a:hover,
.contact-form-panel-media-body a:hover {
    opacity: 0.85;
}

.contact-form-panel-media-heading {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.7;
	color: var(--color-white);
	margin: 28px 0 0 0;
}

/* --------------------------------------------------------------------------
   RIGHT: White form column
   Figma: heading Playfair 43/55, helper Aktiv 17, then form fields, SEND
   button (#00405E full-width), confirmation note, PLEASE NOTE block.
   Screenshot shows a thin border around the whole white column.
   -------------------------------------------------------------------------- */
.contact-form-panel-right-col {
	display: flex;
	width: 61%;
	padding: 0 0 0 22px;
}

.contact-form-panel-right-inner {
    background-color: var(--color-white);
    border: 1px solid var(--color-text-dark);
    padding: 39px 53px 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.contact-form-panel-form-heading {
    margin: 0 0 9px;
}

.contact-form-panel-form-helper {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.5;
    color: var(--color-text-dark);
    margin: 0 0 10px;
}

/* .contact-form-panel-form,
.contact-form-panel-form-stub {
    margin: 0 0 clamp(16px, 1.5vw, 22px);
} */

.contact-form-panel-form-stub-note {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text-dark);
    background: #f4f4f4;
    padding: 16px;
    margin: 0;
    border-left: 3px solid var(--color-brand-blue);
}

/* Gravity Forms overrides inside the white right column.
   The global gf_custom rules in style.css are for the DARK inline form
   variant (transparent bg + white borders). Here the form sits on white,
   so we re-scope light-variant styles under our layout wrapper. */
.contact-form-panel-form .gform_wrapper form {
    margin: 0;
}
.contact-form-panel-form .gform_heading{
    display: none !important;
}
.contact-form-panel-form .gform_fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 21px !important;
    margin: 26px 0 0 0;
}

.contact-form-panel-form .gfield {
    grid-column: span 1;
}

.contact-form-panel-form .gfield--width-full,
.contact-form-panel-form .gfield[class*="gfield--type-textarea"],
.contact-form-panel-form .gfield[class*="gfield--type-select"],
.contact-form-panel-form .gfield[class*="gfield--type-html"] {
    grid-column: 1 / -1;
}

.contact-form-panel-form .gform_fields .gfield .gfield_label {
    display: block !important;
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: var(--color-text-dark) !important;
    margin: 0 0 8px !important;
}
.contact-form-panel-form .gform_fields .gfield .gfield_label .gfield_required{
    font-size: 16px;
}
.contact-form-panel-form .gform_fields .gfield input,
.contact-form-panel-form .gform_fields .gfield select,
.contact-form-panel-form .gform_fields .gfield textarea {
    background-color: var(--color-white); border: 1px solid var(--color-text-dark); color: var(--color-text-dark); font-family: var(--font-body);
    font-size: 17px; font-weight: 400; line-height: 1.5; padding: 12px 19px; width: 100%; height: auto !important; border-radius: 0;
    outline: none; box-sizing: border-box; transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form-panel-form .gform_fields .gfield textarea {
    min-height: 148px; height: 148px !important; resize: vertical; min-block-size: 11.6rem !important; padding: 19px 19px;
}

.contact-form-panel-form .gform_fields .gfield input:focus,
.contact-form-panel-form .gform_fields .gfield select:focus,
.contact-form-panel-form .gform_fields .gfield textarea:focus {
    border-color: var(--color-brand-blue); box-shadow: 0 0 0 1px var(--color-brand-blue);
}

.contact-form-panel-form .gform_fields .gfield ::placeholder {
    color: #7a7a7a; opacity: 1; font-family: var(--font-body); font-size: 17px;
}

.contact-form-panel-form .gform_fields .gfield select {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url('data:image/svg+xml,<svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.6855 0.728516L8.84277 9.05078L0 0.728516L0.685547 0L8.84277 7.67676L17 0L17.6855 0.728516Z" fill="%23333333"/></svg>');
    background-repeat: no-repeat; background-position: right 18px center; background-size: 14px; padding-right: 46px;
}

/* SEND button — dark navy full-width */
.contact-form-panel-form .gform-footer, .contact-form-panel-form .gform_footer {
	margin: 16px 0 0 0 !important; padding: 0 !important;
}

.contact-form-panel-form .gform-footer .gform_button, .contact-form-panel-form .gform_footer .gform_button {
	display: block !important; width: 100%; min-width: 100%; min-inline-size: 100% !important; padding: 15px 15px !important;
	background-color: var(--color-brand-navy) !important; color: var(--color-white) !important; border: 1px solid var(--color-brand-navy) !important;
	border-radius: 0 !important; font-family: var(--font-body) !important; font-weight: 700 !important; font-size: 16px !important;
	line-height: 1.2 !important; letter-spacing: 0; text-transform: uppercase !important; cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important; outline: 0 !important;
}

.contact-form-panel-form .gform-footer .gform_button:hover,
.contact-form-panel-form .gform_footer .gform_button:hover,
.contact-form-panel-form .gform-footer .gform_button:focus,
.contact-form-panel-form .gform_footer .gform_button:focus {
    background-color: var(--color-brand-blue) !important;
    border-color: var(--color-brand-blue) !important;
    color: var(--color-white) !important;
}

/* Confirmation note under the SEND button */
.contact-form-panel-form-confirmation {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-dark);
    margin: 12px 0 0;
}

/* PLEASE NOTE block */
.contact-form-panel-please-note {
    margin: clamp(20px, 2vw, 37px) 0 0;
}

.contact-form-panel-please-note-heading {
	font-family: var(--font-body); font-weight: 700; font-size: 15.5px; line-height: 1.5; color: #1D2B32;
	margin: 0 0 3px; text-transform: uppercase; letter-spacing: 0.02em;
}

.contact-form-panel-please-note-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-dark);
}

.contact-form-panel-please-note-body p {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Offices grid (2-col) + General email block — blue-panel content tier.
   Parent .contact-form-panel-left-inner already provides vertical rhythm
   via `gap: clamp(24px, 2.4vw, 35px)`, so no vertical margins are needed
   on these blocks — the panel's flex gap handles spacing.
   -------------------------------------------------------------------------- */
.contact-form-panel-offices {
	display: grid; grid-template-columns: max-content max-content; justify-content: start; column-gap: 72px; row-gap: 24px;
	margin: 40px 0 0 0; width: 100%; padding: 24px 0; border-top: 2px solid rgba(255, 255, 255, 0.4);
	border-bottom: 2px solid rgba(255, 255, 255, 0.4);  max-width: 320px;
}

.contact-form-panel-office {
    display: flex; flex-direction: column; gap: 9px; align-items: flex-start;
}

.contact-form-panel-office-label {
    font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--color-white);
    margin: 0; letter-spacing: 0;
}

.contact-form-panel-office-phone {
    font-family: var(--font-body); font-weight: 400; font-size: 17px; line-height: 1.3; color: var(--color-white);
    margin: 0; letter-spacing: 0;
}

.contact-form-panel-call-office {
    display: inline-block; color: var(--color-white); font-family: var(--font-body); font-weight: 400; font-size: 15px;
    line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px;
    background: none; padding: 0; border: none; width: auto; transition: text-decoration-color 0.3s ease, opacity 0.3s ease;
}

.contact-form-panel-call-office:hover,
.contact-form-panel-call-office:focus,
.contact-form-panel-call-office:visited {
    color: var(--color-white);
}

.contact-form-panel-call-office:hover {
    text-decoration: none; opacity: 0.85;
}

.contact-form-panel-general-email {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 20px 0 0 0;
}

.contact-form-panel-general-email-label {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    color: var(--color-white);
    margin: 0;
    letter-spacing: 0;
}

.contact-form-panel-general-email-link {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4;
    color: var(--color-white);
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.contact-form-panel-general-email-link:hover,
.contact-form-panel-general-email-link:focus,
.contact-form-panel-general-email-link:visited {
    color: var(--color-white);
}

.contact-form-panel-general-email-link:hover {
    opacity: 0.85;
    text-decoration: none;
}
.contact-form-panel-media-body iframe{
    margin: 15px 0 0 0;
}
.hide_panel_offices_phonenumber .contact-form-panel-offices{
    display: none;
}
.hide_panel_offices_phonenumber .contact-form-panel-panel-heading{
    margin: 0;
}

/* --------------------------------------------------------------------------
   Responsive (max-width media queries per project-config.json)
   -------------------------------------------------------------------------- */
@media (max-width: 1360px) {
    .contact-form-panel-right-inner,
    .contact-form-panel-left-inner{
        padding: 45px 40px; height: 100%;
    }
    .contact-form-panel-form-heading{
        line-height: 1;
    }
}

@media (max-width: 1200px) {
    
}

@media (max-width: 1024px) {
    .contact-form-panel-right-inner, .contact-form-panel-left-inner {
        padding: 35px 30px;
    }
    .contact-form-panel-buttons{
        margin: 20px 0 0 0;
    }
    .contact-form-panel-offices{
        margin: 30px 0 0 0;
    }
    .contact-form-panel-disclaimer, .contact-form-panel-media-body{
        margin: 20px 0 0 0;
    }
}

@media (max-width: 991px) {
    
    .contact-form-panel-left-col{
        width: 100%;
    }
    .contact-form-panel-right-col{
        width: 100%; padding: 30px 0 0 0;
    }
    .contact-form-panel-buttons,
    .contact-form-panel-panel-intro {
        max-width: 100%;
    }
    .contact-form-panel-intro p br{
        display: none;
    }
    /* Offices grid REMAINS 2-col hug-content, left-aligned; panel is now
       full-width, so the two columns sit side-by-side comfortably. */
    /* .contact-form-panel-offices {
        grid-template-columns: max-content max-content;
        justify-content: start;
        column-gap: 72px;
    } */
}

@media (max-width: 767px) {
    .contact-form-panel-right-inner, .contact-form-panel-left-inner {
	    padding: 30px;
    }

    .contact-form-panel-panel-heading {
        margin: 0 0 10px 0;
    }
    .contact-form-panel-buttons .btn {
        padding: 14px 20px;
    }
    .contact-form-panel-offices {
        column-gap: 48px;
        padding: 20px 0;
        max-width: 100%;
    }
    .contact-form-panel-form .gform_fields {
        grid-template-columns: 1fr;
        gap: 16px !important;
    }
    .contact-form-panel-form .gfield {
        grid-column: 1 / -1;
    }
    .contact-form-panel-form .gform_fields .gfield input,
    .contact-form-panel-form .gform_fields .gfield select,
    .contact-form-panel-form .gform_fields .gfield textarea {
        font-size: 16px;
        padding: 10px 14px;
    }
    .contact-form-panel-form .gform-footer .gform_button, .contact-form-panel-form .gform_footer .gform_button{
        font-size: 15px !important;
    }
    .contact-form-panel-intro-heading{
        margin: 0 0 15px 0;
    }
}

@media (max-width: 480px) {
    .contact-form-panel-right-inner, .contact-form-panel-left-inner {
	    padding: 25px 20px;
    }
}