/* ===== Hero ===== */
    .contact-hero {
        padding: calc(var(--nav-height) + clamp(4rem,10vw,7rem)) 1.25rem clamp(2.5rem,6vw,4rem);
        max-width: 1600px; margin: 0 auto; text-align: center;
    }
    .contact-eyebrow {
        font-size: .8rem; letter-spacing: .32em; text-transform: uppercase;
        color: var(--accent); margin-bottom: 1.2rem;
    }
    .contact-hero h1 {
        font-family: var(--font-serif); font-weight: 300;
        font-size: clamp(3rem,8vw,5.5rem); line-height: 1.02; letter-spacing: -.01em;
        color: #111;
    }
    .contact-hero p {
        margin: 1.4rem auto 0; max-width: none;
        color: var(--text-secondary); font-size: 1.05rem;
        white-space: nowrap;
    }
    @media(max-width:768px){ .contact-hero p { white-space: normal; } }

    /* ===== Contact layout ===== */
    .contact-main {
        max-width: 1600px; margin: 0 auto; padding: 0 1.25rem clamp(4rem,8vw,6rem);
        display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr);
        gap: clamp(1.5rem,4vw,3.5rem); align-items: stretch;
    }
    @media(max-width:900px){.contact-main{grid-template-columns:1fr;}}
    .contact-info {
        background: var(--bg-secondary);
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: 1rem; padding: clamp(1.75rem,3vw,2.75rem);
        display: flex; flex-direction: column; gap: 1.85rem;
    }
    .info-block .info-label {
        font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
        margin-bottom: .55rem;
    }
    .info-block .info-value { font-size: 1.02rem; color: #111; line-height: 1.55; }
    .info-block a.info-value { transition: color .25s ease; }
    .info-block a.info-value:hover { color: var(--accent); }
    .info-block a.info-value { display: block; }
    .info-block .info-value + .info-value { margin-top: .45rem; }
    .info-divider { height: 1px; background: rgba(0,0,0,0.08); }
    .info-hours { display: flex; align-items: center; gap: .5rem; font-size: .95rem; color: var(--text-secondary); margin-top: .35rem; }
    .info-hours .tz { color: var(--accent); font-size: .8rem; letter-spacing: .05em; }

    /* ===== Map ===== */
    .map-wrap {
        border-radius: 1rem; overflow: hidden; border: 1px solid rgba(0,0,0,0.08);
        position: relative; min-height: 420px; background: var(--bg-tertiary);
    }
    #amap { width: 100%; height: 100%; min-height: 420px; }
    .map-fallback {
        position: absolute; inset: 0; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: .6rem; text-align: center; padding: 2rem;
        color: var(--text-secondary); pointer-events: none;
    }
    .map-fallback .mf-title { color: #111; font-family: var(--font-serif); font-size: 1.4rem; font-weight: 300; }
    .map-fallback .mf-note { font-size: .82rem; max-width: 24rem; line-height: 1.6; }
    .map-fallback code { color: var(--accent); font-family: ui-monospace, Menlo, 'Source Han Sans CN', monospace; font-size: .78rem; }

    /* ===== Form ===== */
    .contact-form-section {
        max-width: 1600px; margin: 0 auto; padding: 0 1.25rem clamp(5rem,9vw,7rem);
    }
    .form-head { margin: 0 auto 2.5rem; max-width: 44rem; text-align: center; }
    .form-head .section-eyebrow {
        font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem;
    }
    .form-head h2 { font-family: var(--font-serif); font-weight: 300; font-size: clamp(2.2rem,5.5vw,3.4rem); line-height: 1.1; color: #111; }
    .form-head .form-sub {
        margin: 1rem auto 0; color: var(--text-secondary); font-size: 1rem; line-height: 1.6;
        white-space: nowrap; text-align: center;
    }
    @media(max-width:768px){ .form-head .form-sub { white-space: normal; } }
    .contact-form {
        display: block;
        background: var(--bg-secondary); border: 1px solid rgba(0,0,0,0.08);
        border-radius: 1rem; padding: clamp(1.5rem,3vw,2.75rem);
    }
    .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        column-gap: 1.5rem; row-gap: 1.25rem;
    }
    .f-country { grid-column: 1; grid-row: 1; }
    .f-org     { grid-column: 2; grid-row: 1; }
    .f-contact { grid-column: 1; grid-row: 2; }
    .f-phone   { grid-column: 1; grid-row: 3; }
    .f-email   { grid-column: 1; grid-row: 4; }
    .f-message { grid-column: 2; grid-row: 2 / span 3; display: flex; flex-direction: column; }
    .f-message textarea { flex: 1 1 auto; min-height: 220px; }
    .f-note    { grid-column: 1; grid-row: 5; }
    @media(max-width:760px){
        .form-grid { grid-template-columns: 1fr; grid-template-rows: none; }
        .f-country, .f-org, .f-contact, .f-phone, .f-email, .f-message, .f-note { grid-column: 1; grid-row: auto; }
        .f-message textarea { min-height: 160px; }
    }
    .field { display: flex; flex-direction: column; gap: .5rem; }
    .field label { font-size: .82rem; color: var(--text-secondary); letter-spacing: .02em; }
    .field.required > label::after { content: " *"; color: #c0392b; font-weight: 600; }
    .field input, .field textarea {
        background: #fff; border: 1px solid rgba(0,0,0,0.12); border-radius: .6rem;
        padding: .85rem 1rem; color: #111; font-family: inherit; font-size: .95rem; transition: border-color .25s ease;
    }
    .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
    .field textarea { resize: vertical; min-height: 120px; }
    .f-note { font-size: .76rem; color: var(--text-tertiary); }
    .form-submit {
        display: block; width: fit-content; margin: 1.5rem auto 0;
        background: #fff; color: #111; border: 1px solid #111; border-radius: 0;
        padding: .9rem 2.8rem; font-size: .95rem; font-weight: 600; cursor: pointer;
        transition: background .3s ease, color .3s ease;
    }
    .form-submit:hover { background: #111; color: #fff; }
    .form-error {
        display: none; text-align: center;
        color: #c0392b; font-size: .9rem; margin-top: .75rem;
    }
    .form-error.show { display: block; }
    .form-success {
        display: none; align-items: center; justify-content: center; gap: .6rem;
        color: var(--accent); font-size: .95rem; margin-top: .75rem;
    }
    .form-success.show { display: flex; }


/* CI integration additions: real form feedback. */
.field-error { min-height: 1.2em; color: #c0392b; font-size: .8rem; }
.form-submit:disabled { opacity: .55; cursor: wait; }
.form-status { display: none; margin-top: .75rem; color: var(--accent); text-align: center; font-size: .95rem; }
.form-status.show { display: block; }
.form-status.error { color: #c0392b; }

/* WebKit renders the single-column form 15px wider than its container at 360px;
   Chromium does not. WebKit is the one following the spec: `1fr` is
   `minmax(auto, 1fr)`, and an `auto` minimum resolves to the item's min-content
   width — which for a text input is its intrinsic ~20-character size, here
   330px inside a 270px track. Chromium's narrower result is the deviation.
   Releasing the minimum lets the column shrink to the container on both. */
.form-grid > * { min-width: 0; }
.field input, .field select, .field textarea { min-width: 0; max-width: 100%; }

/* 9/3 反馈第 2 条：地图改成静态贴图。容器与旧的 #amap 尺寸行为保持一致——
   .map-wrap 是 position:relative + min-height:420px，所以贴图绝对定位铺满即可。
   文字块 .map-fallback 留在下层：贴图 404 时 onerror 隐藏 img，文字自然露出。 */
.map-static {
    position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
    object-fit: cover;
    /* 锚在左下角：贴图是高德地图截图，左下角那行 `© AutoNavi - GS(...)号` 版权标注
       必须始终可见。容器比例在各断点从 0.83（手机）到 1.78（英文桌面）不等，
       cover 一定会裁掉一部分——锚 center 会把底部标注裁没，锚 left bottom
       则保证那个角在任何断点都留着。 */
    object-position: left bottom;
}