:root {
    --ra4contact-ink: #191918;
    --ra4contact-muted: #6d6861;
    --ra4contact-paper: #f5f2ec;
    --ra4contact-line: rgba(25, 25, 24, .13);
    --ra4contact-blue: #087abb;
    --ra4contact-red: #e8322a;
    --ra4contact-yellow: #f4c515;
}

body.page-kapcsolat { background: #fbfaf7; }
.ra4-contact,
.ra4-contact * { box-sizing: border-box; }
.ra4-contact {
    width: min(calc(100% - 64px), 1240px);
    margin: 0 auto;
    padding: clamp(54px, 8vw, 108px) 0;
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(520px, 1.15fr);
    gap: clamp(48px, 8vw, 100px);
    align-items: start;
    color: var(--ra4contact-ink);
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}
.ra4-contact__intro { padding-top: 20px; }
.ra4-contact__eyebrow { display: block; margin-bottom: 20px; color: var(--ra4contact-blue); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ra4-contact h1 { margin: 0 0 22px; font-size: clamp(38px, 5vw, 64px); letter-spacing: -.055em; line-height: 1.02; }
.ra4-contact__intro > p { max-width: 540px; margin: 0; color: var(--ra4contact-muted); font-size: 16px; line-height: 1.75; }
.ra4-contact__details { margin-top: 38px; display: grid; gap: 12px; }
.ra4-contact__details a,
.ra4-contact__details > div { padding: 17px 19px; display: grid; gap: 5px; border-left: 3px solid var(--ra4contact-yellow); background: #fff; color: var(--ra4contact-ink); text-decoration: none; }
.ra4-contact__details small { color: var(--ra4contact-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ra4-contact__details strong { font-size: 14px; }
.ra4-contact__form-card { padding: clamp(26px, 4vw, 42px); border: 1px solid var(--ra4contact-line); border-top: 5px solid var(--ra4contact-yellow); border-radius: 9px; background: #fff; box-shadow: 0 24px 70px rgba(36, 28, 20, .07); }
.ra4-contact__notice { margin-bottom: 25px; padding: 16px 18px; display: grid; gap: 4px; border: 1px solid var(--ra4contact-line); border-left: 4px solid #438153; border-radius: 5px; background: #f4faf5; font-size: 13px; line-height: 1.55; }
.ra4-contact__notice--error { border-left-color: var(--ra4contact-red); background: #fff6f5; }
.ra4-contact__notice span { color: var(--ra4contact-muted); }
.ra4-contact__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.ra4-contact__form label { min-width: 0; display: grid; gap: 7px; color: var(--ra4contact-ink); font-size: 12px; font-weight: 750; letter-spacing: .035em; }
.ra4-contact__form abbr { color: var(--ra4contact-red); text-decoration: none; }
.ra4-contact__form input[type="text"],
.ra4-contact__form input[type="email"],
.ra4-contact__form input[type="tel"],
.ra4-contact__form textarea { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--ra4contact-line); border-radius: 5px; background: #fff; color: var(--ra4contact-ink); font: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0; outline: none; transition: border-color .16s ease, box-shadow .16s ease; }
.ra4-contact__form textarea { min-height: 150px; padding-block: 13px; resize: vertical; }
.ra4-contact__form input:focus,
.ra4-contact__form textarea:focus { border-color: var(--ra4contact-blue); box-shadow: 0 0 0 3px rgba(8, 122, 187, .1); }
.ra4-contact__callback { margin: 20px 0 !important; display: flex !important; align-items: center; gap: 10px !important; font-size: 13px !important; letter-spacing: 0 !important; cursor: pointer; }
.ra4-contact__callback input { width: 18px; height: 18px; margin: 0; accent-color: var(--ra4contact-blue); }
.ra4-contact__message { margin-top: 0; }
.ra4-contact__form button { width: 100%; min-height: 54px; margin-top: 22px; padding: 0 22px; border: 1px solid var(--ra4contact-yellow); border-radius: 5px; background: var(--ra4contact-yellow); color: var(--ra4contact-ink); font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background .17s ease, border-color .17s ease, color .17s ease; }
.ra4-contact__form button:hover { border-color: var(--ra4contact-ink); background: var(--ra4contact-ink); color: #fff; }
.ra4-contact__honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) {
    .ra4-contact { grid-template-columns: 1fr; gap: 40px; }
    .ra4-contact__intro { padding-top: 0; }
}
@media (max-width: 700px) {
    .ra4-contact { width: calc(100% - 36px); padding: 44px 0; }
    .ra4-contact__grid { grid-template-columns: 1fr; }
    .ra4-contact__form-card { padding: 25px 20px; }
}