.contact-hero h1 { max-width: 930px; }
.contact-paths-head { max-width: 980px; }
.contact-section { scroll-margin-top: calc(var(--nv-header-height) + 24px); }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
.contact-form { padding: clamp(22px, 4vw, 34px); border: 1px solid var(--nv-line); border-radius: 18px; background: var(--nv-panel); }
.contact-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.contact-form .nv-field { margin-top: 0; }
.contact-form .nv-field.is-wide { grid-column: 1 / -1; }
.contact-form textarea { min-height: 170px; }
.contact-consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; margin-top: 18px; color: var(--nv-muted); font-size: 12px; line-height: 1.7; }
.contact-consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--nv-accent); }
.contact-consent a { color: var(--nv-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.contact-submit-row { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; margin-top: 22px; }
.contact-submit-row .nv-content-primary { border: 1px solid var(--nv-accent); }
.contact-submit-row span { color: var(--nv-muted); font-size: 12px; line-height: 1.6; }
.contact-submit-row span.is-success { color: var(--nv-accent); }
.contact-submit-row span.is-error { color: var(--nv-danger); }

.contact-aside { position: relative; display: grid; grid-template-columns: minmax(300px, 1.05fr) repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 12px; align-items: end; margin: 0 0 -22px; padding: 0 12px; }
.contact-vivi-card { position: relative; grid-column: 1; grid-row: 1 / 3; display: grid; min-height: 366px; padding: 0; overflow: visible; border: 0; color: var(--nv-text); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.contact-vivi-card:focus-visible { outline: 2px solid var(--nv-accent); outline-offset: 3px; }
.contact-vivi-visual { position: absolute; z-index: 3; inset: auto -74px -1px -102px; display: block; height: 400px; pointer-events: none; transition: transform .22s ease; }
.contact-vivi-visual img { position: absolute; left: 50%; bottom: 0; width: auto; height: 400px; max-width: none; transform: translateX(-50%); }
.contact-vivi-card:hover .contact-vivi-visual { transform: translateY(-5px); }
.contact-inquiry-head { grid-column: 2 / -1; grid-row: 1; align-self: end; margin: 0; padding: 0 4px 4px; }
.contact-inquiry-head h2 { margin-top: 5px; }
.contact-inquiry-head > p:last-child { max-width: 860px; margin-bottom: 0; }
.contact-aside article { grid-row: 2; height: 190px; min-height: 190px; box-sizing: border-box; display: grid; align-content: start; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; margin-bottom: 34px; padding: 20px; border: 1px solid var(--nv-line); border-radius: 14px; background: color-mix(in srgb, var(--nv-panel) 94%, transparent); transform: translateY(-30px); }
.contact-aside article > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--nv-accent); background: var(--nv-accent-soft); font-size: 10px; font-weight: 750; }
.contact-aside h3 { margin: 3px 0 0; font-size: 15px; line-height: 1.45; }
.contact-aside p { margin: 8px 0 0; color: var(--nv-muted); font-size: 12px; line-height: 1.72; }
.contact-direct { grid-column: 1 / -1; margin: 0 0 32px; padding: 16px 18px; border-left: 3px solid var(--nv-accent); border-radius: 0 10px 10px 0; color: var(--nv-muted); background: var(--nv-accent-soft); line-height: 1.7; }
.contact-direct a { color: var(--nv-accent); }

.contact-form { position: relative; z-index: 2; width: 100%; margin-top: -30px; padding-top: clamp(34px, 5vw, 50px); }

@media (max-width: 900px) {
    .contact-aside { grid-template-columns: minmax(230px, .8fr) repeat(3, minmax(0, 1fr)); overflow-x: auto; padding-bottom: 2px; }
    .contact-aside article { min-width: 220px; }
}

@media (max-width: 720px) {
    .contact-form-grid, .contact-aside { grid-template-columns: 1fr; }
    .contact-form .nv-field.is-wide { grid-column: auto; }
    .contact-aside { margin-bottom: -16px; padding: 0; overflow: visible; }
    .contact-vivi-card { grid-column: 1; grid-row: auto; min-height: 290px; }
    .contact-inquiry-head { grid-column: 1; grid-row: auto; padding: 4px 2px 8px; }
    .contact-vivi-visual { inset: auto -12px 2px -40px; height: 300px; }
    .contact-vivi-visual img { height: 300px; }
    .contact-aside article { grid-row: auto; min-width: 0; height:auto; min-height: auto; margin-bottom: 0; transform: translateY(-16px); }
    .contact-aside article:last-of-type { margin-bottom: 30px; }
    .contact-form { margin-top: -16px; }
}