:root {
    --contact-navy: #082f5b;
    --contact-text: #102a43;
    --contact-muted: #667085;
    --contact-green: #0a7a32;
    --contact-green-hover: #086529;
    --contact-green-soft: #eaf5ed;
    --contact-background: #f6f8fb;
    --contact-border: #d9e2ec;
}

.contact-page { --contact-header-height: 124px; color: var(--contact-text); background: var(--contact-background); }
.contact-content { width: min(calc(100% - clamp(24px, 3.5vw, 48px)), 1320px); max-width: 1320px; margin-inline: auto; padding-block: 42px 56px; }
.contact-page-heading { max-width: 760px; margin-bottom: 32px; }
.contact-page-heading h1 { margin: 0; color: var(--contact-navy); font: 800 clamp(34px, 4vw, 48px)/1.1 "Hanken Grotesk", sans-serif; letter-spacing: -.025em; }
.contact-page-heading p { margin: 12px 0 0; color: var(--contact-muted); font-size: 17px; line-height: 1.6; }
.contact-layout { display: grid; grid-template-columns: minmax(260px, .35fr) minmax(0, .65fr); align-items: start; gap: 32px; }
.contact-info-card,.contact-form-card { background: #fff; border: 1px solid var(--contact-border); border-radius: 14px; box-shadow: 0 12px 32px rgba(8,47,91,.07); }
.contact-info-card { padding: 30px 28px; }
.contact-info-card h2,.contact-form-heading h2 { margin: 0; color: var(--contact-navy); font: 750 27px/1.2 "Hanken Grotesk", sans-serif; }
.contact-info-list { display: grid; gap: 12px; margin-top: 24px; }
.contact-info-row { min-width: 0; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 13px; padding: 14px 0; border-bottom: 1px solid #e8edf2; }
.contact-info-row:last-child { border-bottom: 0; }
.contact-info-icon { width: 40px; height: 40px; display: grid; color: var(--contact-green); background: var(--contact-green-soft); border-radius: 50%; font-size: 21px; place-items: center; }
.contact-info-row h3 { margin: 0 0 4px; color: var(--contact-navy); font-size: 15px; font-weight: 750; }
.contact-info-row p,.contact-info-row a { overflow-wrap: anywhere; margin: 0; color: var(--contact-muted); font-size: 14px; line-height: 1.55; }
.contact-info-row a { color: var(--contact-green); font-weight: 650; text-decoration: none; }
.contact-info-row a:hover { color: var(--contact-green-hover); text-decoration: underline; }
.contact-form-card { padding: 32px 34px; }
.contact-form-heading { margin-bottom: 24px; }
.contact-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.contact-field { min-width: 0; }
.contact-field--wide { grid-column: 1/-1; }
.contact-field label { display: inline-block; margin-bottom: 7px; color: var(--contact-text); font-size: 14px; font-weight: 700; }
.contact-field label > span,.contact-field label > b { color: #b42318; }
.contact-field input:not([type=checkbox]),.contact-field select,.contact-field textarea { width: 100%; min-width: 0; padding: 12px 14px; color: var(--contact-text); background: #fff; border: 1px solid var(--contact-border); border-radius: 9px; outline: 0; font: 400 16px/1.4 Inter,sans-serif; transition: border-color .18s ease,box-shadow .18s ease; }
.contact-field input:not([type=checkbox]),.contact-field select { height: 52px; }
.contact-field textarea { min-height: 126px; resize: vertical; }
.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus { border-color: var(--contact-green); box-shadow: 0 0 0 3px rgba(10,122,50,.14); }
.contact-field [aria-invalid=true] { border-color: #d92d20!important; box-shadow: 0 0 0 3px rgba(217,45,32,.1)!important; }
.contact-error { min-height: 18px; display: block; margin-top: 4px; color: #b42318; font-size: 12px; }
.contact-field--consent { margin-top: 18px; }
.contact-field--consent label { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-weight: 500; cursor: pointer; }
.contact-field--consent input { width: 19px; height: 19px; flex: 0 0 19px; margin-top: 1px; accent-color: var(--contact-green); }
.contact-submit { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 17px; padding: 12px 24px; color: #fff; background: var(--contact-green); border: 0; border-radius: 9px; font-weight: 750; cursor: pointer; }
.contact-submit:hover { background: var(--contact-green-hover); }
.contact-submit:disabled { cursor: wait; opacity: .65; }
.contact-submit:focus-visible,.contact-info-row a:focus-visible,.contact-success a:focus-visible { outline: 3px solid rgba(10,122,50,.35); outline-offset: 3px; }
.contact-form-status { min-height: 22px; margin: 10px 0 0; color: #b42318; font-size: 14px; }
.contact-success { padding: 24px 8px 8px; text-align: center; }
.contact-success__icon { color: var(--contact-green); font-size: 58px; }
.contact-success h2 { margin: 12px 0 8px; color: var(--contact-navy); font: 750 30px/1.2 "Hanken Grotesk",sans-serif; }
.contact-success p { margin: 0; color: var(--contact-muted); }
.contact-reference { margin-top: 18px!important; color: var(--contact-text)!important; }
.contact-success-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.contact-success-actions a { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; color: var(--contact-navy); background: #fff; border: 1px solid var(--contact-border); border-radius: 9px; font-weight: 700; text-decoration: none; }
.contact-success-actions .contact-success-whatsapp { color: #fff; background: var(--contact-green); border-color: var(--contact-green); }

@media (max-width: 900px) {
    .contact-content { width: calc(100% - 48px); padding-block: 34px 48px; }
    .contact-layout { grid-template-columns: 1fr; }
    .contact-info-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .contact-info-row:nth-last-child(2) { border-bottom: 0; }
}

@media (min-width: 901px) {
    .contact-layout { grid-template-columns: minmax(260px, .34fr) minmax(0, .66fr); }
    .contact-info-card { position: sticky; top: calc(var(--contact-header-height) + 20px); align-self: start; }
}

@media (max-width: 600px) {
    .contact-content { width: calc(100% - 32px); padding-block: 28px 38px; }
    .contact-page-heading { margin-bottom: 24px; }
    .contact-page-heading p { font-size: 15px; }
    .contact-layout { gap: 20px; }
    .contact-info-card,.contact-form-card { padding: 24px 20px; }
    .contact-info-list,.contact-form-grid { grid-template-columns: 1fr; }
    .contact-info-row:nth-last-child(2) { border-bottom: 1px solid #e8edf2; }
    .contact-submit { width: 100%; }
    .contact-success-actions { flex-direction: column; }
    .contact-success-actions a { width: 100%; }
}

/* Match the responsive density used by the storefront. */
.contact-content {
    width: min(calc(100% - (2 * var(--site-gutter, clamp(16px, 2.5vw, 32px)))), var(--site-container, 1320px));
    max-width: var(--site-container, 1320px);
    margin-inline: auto;
    padding-block: clamp(32px, 4vw, 48px);
}
.contact-page-heading { max-width: 680px; margin-bottom: 25px; }
.contact-page-heading h1 { font-size: clamp(28px, 2.5vw, 38px); }
.contact-page-heading p { margin-top: 8px; font-size: 15px; }
.contact-layout { grid-template-columns: minmax(250px, .32fr) minmax(0, .68fr); gap: 24px; }
.contact-info-card,.contact-form-card { border-radius: 6px; box-shadow: 0 8px 24px rgba(8,47,91,.06); }
.contact-info-card { padding: 24px 22px; }
.contact-form-card { padding: 26px 28px; }
.contact-info-card h2,.contact-form-heading h2 { font-size: 23px; }
.contact-info-list { gap: 8px; margin-top: 18px; }
.contact-info-row { grid-template-columns: 38px minmax(0,1fr); gap: 11px; padding: 11px 0; }
.contact-info-icon { width: 36px; height: 36px; font-size: 19px; }
.contact-form-heading { margin-bottom: 19px; }
.contact-form-grid { gap: 14px 16px; }
.contact-field label { font-size: 13px; }
.contact-field input:not([type=checkbox]),.contact-field select,.contact-field textarea { padding: 10px 12px; font-size: 14px; }
.contact-field input:not([type=checkbox]),.contact-field select { height: 48px; }
.contact-field textarea { min-height: 110px; }
.contact-submit { min-height: 46px; margin-top: 13px; padding: 10px 20px; }

@media (max-width: 1023px) {
    .contact-layout { grid-template-columns: 1fr; }
    .contact-info-card { position: static; }
    .contact-info-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 600px) {
    .contact-content { width: calc(100% - 24px); padding-block: 27px 34px; }
    .contact-page-heading { margin-bottom: 20px; }
    .contact-page-heading h1 { font-size: clamp(27px, 8vw, 33px); }
    .contact-layout { gap: 16px; }
    .contact-info-card,.contact-form-card { padding: 21px 17px; }
    .contact-info-list,.contact-form-grid { grid-template-columns: 1fr; }
    .contact-submit { width: 100%; }
}

/* --- Contact: 479px and 360px improvements --- */
@media (max-width: 479px) {
    .contact-content { width: calc(100% - 20px); padding-block: 22px 28px; }
    .contact-page-heading { margin-bottom: 16px; }
    .contact-page-heading h1 { font-size: clamp(24px, 7.5vw, 29px); }
    .contact-page-heading p { font-size: 13.5px; margin-top: 6px; }
    .contact-layout { gap: 14px; }
    .contact-info-card, .contact-form-card { padding: 18px 14px; }
    .contact-info-card h2, .contact-form-heading h2 { font-size: 20px; }
    .contact-info-row { grid-template-columns: 34px minmax(0,1fr); gap: 9px; padding: 9px 0; }
    .contact-info-icon { width: 32px; height: 32px; font-size: 17px; }
    .contact-info-row h3 { font-size: 14px; }
    .contact-info-row p, .contact-info-row a { font-size: 13px; }
    .contact-form-grid { gap: 12px; }
    .contact-field label { font-size: 12.5px; }
    .contact-field input:not([type=checkbox]), .contact-field select { height: 44px; }
    .contact-field textarea { min-height: 96px; }
    .contact-submit { width: 100%; min-height: 44px; }
    .contact-success h2 { font-size: 24px; }
    .contact-success-actions a { font-size: 13px; min-height: 44px; }
}

@media (max-width: 360px) {
    .contact-content { width: calc(100% - 16px); padding-block: 18px 24px; }
    .contact-page-heading h1 { font-size: clamp(21px, 6.5vw, 24px); }
    .contact-info-card, .contact-form-card { padding: 15px 12px; }
    .contact-field input:not([type=checkbox]), .contact-field select { height: 42px; }
}