/* Contact page presentation; shared navigation and footer are styled separately. */
.contact-final-page { --contact-copper:#b28850; --contact-ink:#151515; }
.contact-final-page .contact-shell { width:min(92%,1320px); }

.contact-final-page .contact-hero {
  position:relative;
  display:flex;
  align-items:center;
  height:clamp(330px,33.6vw,485px);
  min-height:0;
  color:#fff;
  background:linear-gradient(90deg,rgba(10,8,6,.36),transparent 58%),url('/assets/web-v3/contact-final/contact-hero-handshake.webp') center / cover no-repeat;
}
.contact-final-page .contact-hero-copy { width:86%; max-width:1320px; min-width:0; margin-inline:auto; padding:0; background:none; }
.contact-final-page .contact-hero h1 { margin:0 0 9px; color:#fff; font-size:clamp(46px,4.8vw,67px); font-weight:500; line-height:1.12; letter-spacing:.04em; }
.contact-final-page .contact-hero-lead { margin:0; font-family:'Songti SC','STSong','Noto Serif SC',Georgia,serif; font-size:clamp(20px,2.1vw,30px); line-height:1.42; letter-spacing:.05em; }
.contact-final-page .contact-gold-line { display:block; width:38px; height:2px; margin:24px 0 18px; background:#c39b5e; }
.contact-final-page .contact-hero-intro { margin:0; max-width:475px; font-size:clamp(12px,1.15vw,16px); line-height:1.65; letter-spacing:.015em; }
.contact-final-page .contact-hero-aside { position:absolute; top:17%; right:2.4%; margin:0; font-family:'Songti SC','STSong',Georgia,serif; font-size:12px; line-height:1.8; letter-spacing:.12em; text-align:left; color:#f1e5d4; text-shadow:0 1px 4px #1d140e; }
.contact-final-page .contact-hero-aside span { display:block; width:25px; height:1px; margin:18px 0; background:#c39b5e; }
.contact-final-page .contact-hero-aside small { font:9px/1.65 Georgia,serif; letter-spacing:.15em; }

.contact-final-page .contact-quick { min-height:0; padding:31px 0 24px; background:linear-gradient(180deg,#faf9f7,#f4f1ec); }
.contact-final-page .contact-quick-heading { text-align:center; }
.contact-final-page .contact-quick-heading h2 { margin:0; font-size:clamp(29px,2.5vw,37px); font-weight:500; line-height:1.25; }
.contact-final-page .contact-quick-heading p { margin:8px 0 0; color:#85807a; font-size:13px; }
.contact-final-page .contact-quick-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:19px; }
.contact-final-page .contact-quick-card { display:flex; flex-direction:column; align-items:center; min-height:192px; padding:16px 9px 13px; border:1px solid #ebe6de; border-radius:3px; background:#fff; text-align:center; box-shadow:0 10px 23px rgba(62,42,25,.045); transition:transform .18s ease,box-shadow .18s ease; }
.contact-final-page .contact-quick-card:hover { transform:translateY(-2px); border-color:#d0b58e; box-shadow:0 12px 24px rgba(62,42,25,.12); }
.contact-final-page .contact-quick-icon { display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:50%; background:#bc9659; color:#fff; }
.contact-final-page .contact-quick-icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.contact-final-page .contact-quick-card h3 { margin:9px 0 0; font-size:15px; line-height:1.3; }
.contact-final-page .contact-quick-card > p { margin:4px 0 0; color:#99938d; font-size:11px; line-height:1.4; }
.contact-final-page .contact-quick-card > strong { margin-top:7px; font-size:clamp(12px,1.22vw,16px); font-weight:650; line-height:1.4; }
.contact-final-page .contact-quick-card > small { margin-top:auto; padding-top:8px; color:#9d9892; font-size:10px; line-height:1.4; }

/* Earlier side-visual rules are retained for pages still using that layout. */
.contact-final-page .contact-inquiry { background:#fff; }
.contact-final-page .contact-inquiry-side { display:flex; flex-direction:column; min-height:0; padding:0; color:#fff; background:#fff; }
.contact-final-page .contact-inquiry-visual { position:relative; display:flex; align-items:center; flex:1 1 auto; min-height:0; padding:25px; background:linear-gradient(90deg,rgba(12,9,7,.65),rgba(12,9,7,.06) 75%),url('/assets/web-v3/contact-final/contact-consultation.webp') center / cover no-repeat; }
.contact-final-page .contact-inquiry-visual h2 { margin:0; color:#fff; font-size:clamp(23px,2vw,31px); font-weight:500; line-height:1.5; letter-spacing:.035em; text-shadow:0 1px 6px #1b110a; }
.contact-final-page .contact-side-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); flex:0 0 65px; gap:0; padding:8px 5px; background:#fff; color:#8a5d2c; }
.contact-final-page .contact-side-benefits > div { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; border-right:1px solid #e7ddd2; text-align:center; }
.contact-final-page .contact-side-benefits > div:last-child { border:0; }
.contact-final-page .contact-side-benefits svg { width:22px; height:22px; color:#b78b54; stroke-width:1.5; }
.contact-final-page .contact-side-benefits span { color:#6f6a64; font-size:9px; line-height:1.3; white-space:nowrap; }

.contact-final-page .contact-start { padding:31px 0 30px; background:linear-gradient(180deg,#fff,#faf8f5); }
.contact-final-page .contact-start-heading { text-align:center; }
.contact-final-page .contact-start-heading h2 { margin:0; font-size:clamp(30px,2.6vw,39px); font-weight:500; line-height:1.3; }
.contact-final-page .contact-start-heading p { margin:7px 0 0; color:#87827c; font-size:13px; }
.contact-final-page .contact-start-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:20px; }
.contact-final-page .contact-start-card { display:grid; grid-template-columns:42% 58%; min-width:0; min-height:188px; overflow:hidden; border:1px solid #ede6de; border-radius:3px; background:#fff; box-shadow:0 10px 20px rgba(62,42,25,.055); transition:transform .18s ease,box-shadow .18s ease; }
.contact-final-page .contact-start-card:hover { transform:translateY(-2px); box-shadow:0 14px 24px rgba(62,42,25,.13); }
.contact-final-page .contact-start-card > img { width:100%; height:100%; max-height:240px; object-fit:cover; }
.contact-final-page .contact-start-copy { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:22px 22px 16px; }
.contact-final-page .contact-start-copy > svg { width:27px; height:27px; margin-bottom:7px; color:#b88a50; fill:none; stroke:currentColor; stroke-width:1.6; }
.contact-final-page .contact-start-copy strong { font-size:18px; line-height:1.3; }
.contact-final-page .contact-start-copy small { margin-top:8px; color:#827d77; font-size:12px; line-height:1.55; }
.contact-final-page .contact-start-copy > span { margin-top:auto; padding-top:8px; color:#af7f42; font-size:12px; }
.contact-final-page .contact-start-copy b { margin-left:6px; font-size:17px; font-weight:400; }

.contact-final-page .contact-closing { min-height:0; padding:27px 0; background:linear-gradient(90deg,rgba(18,11,7,.85),rgba(18,11,7,.45) 58%,rgba(18,11,7,.17)),url('/assets/web-v3/contact-final/contact-desk-banner.webp') center / cover no-repeat; }
.contact-final-page .contact-closing .contact-shell { width:min(86%,1320px); }
.contact-final-page .contact-closing-inner { display:flex; align-items:center; justify-content:space-between; gap:25px; min-height:92px; }
.contact-final-page .contact-closing h2 { margin:0 0 10px; font-size:clamp(24px,2.4vw,34px); font-weight:500; line-height:1.25; white-space:normal; }
.contact-final-page .contact-closing p { margin:0; max-width:680px; font-size:12px; line-height:1.6; }
.contact-final-page .contact-closing-action { display:flex; align-items:center; justify-content:center; gap:18px; min-width:158px; height:42px; flex:none; padding:0 18px; border-radius:3px; background:#b78d51; color:#fff; font-size:13px; font-weight:600; }
.contact-final-page .contact-closing-action:hover { background:#c3995c; }
.contact-final-page .contact-closing-action span { font-size:20px; font-weight:400; }

@media (max-width:1050px) {
  .contact-final-page .contact-hero-intro br { display:none; }
  .contact-final-page .contact-hero-intro { max-width:400px; }
  .contact-final-page .contact-start-copy { padding:15px; }
  .contact-final-page .contact-start-copy strong { font-size:16px; }
  .contact-final-page .contact-start-copy small { font-size:11px; }
  .contact-final-page .contact-inquiry-visual { padding:18px; }
}
@media (max-width:800px) {
  .contact-final-page .contact-hero { height:390px; }
  .contact-final-page .contact-hero-copy { width:86%; }
  .contact-final-page .contact-hero-aside { display:none; }
  .contact-final-page .contact-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contact-final-page .contact-inquiry-side { min-height:330px; padding:0; }
  .contact-final-page .contact-inquiry-visual { min-height:265px; padding:25px; background-position:center 45%; }
  .contact-final-page .contact-side-benefits { flex-basis:65px; }
  .contact-final-page .contact-start-grid { gap:12px; }
  .contact-final-page .contact-start-card { grid-template-columns:40% 60%; }
}
@media (max-width:620px) {
  .contact-final-page .contact-shell { width:calc(100% - 36px); }
  .contact-final-page .contact-hero { height:370px; background-image:linear-gradient(90deg,rgba(10,8,6,.76),rgba(10,8,6,.47)),url('/assets/web-v3/contact-final/contact-hero-handshake.webp'); background-position:62% center; }
  .contact-final-page .contact-hero-copy { width:calc(100% - 40px); }
  .contact-final-page .contact-hero h1 { font-size:43px; }
  .contact-final-page .contact-hero-lead { font-size:19px; }
  .contact-final-page .contact-gold-line { margin:18px 0 13px; }
  .contact-final-page .contact-hero-intro { max-width:315px; font-size:12px; }
  .contact-final-page .contact-quick { padding:27px 0; }
  .contact-final-page .contact-quick-heading h2 { font-size:28px; }
  .contact-final-page .contact-quick-heading p { font-size:12px; line-height:1.5; }
  .contact-final-page .contact-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:16px; }
  .contact-final-page .contact-quick-card { min-height:175px; padding:14px 6px 11px; }
  .contact-final-page .contact-quick-icon { width:37px; height:37px; }
  .contact-final-page .contact-quick-card h3 { font-size:13px; }
  .contact-final-page .contact-quick-card > p { font-size:10px; }
  .contact-final-page .contact-quick-card > strong { font-size:11px; overflow-wrap:anywhere; }
  .contact-final-page .contact-quick-card[href^="mailto:"] > strong { font-size:10px; }
  .contact-final-page .contact-quick-card > small { font-size:9px; }
  .contact-final-page .contact-inquiry-visual h2 { font-size:25px; }
  .contact-final-page .contact-start { padding:28px 0; }
  .contact-final-page .contact-start-heading h2 { font-size:28px; }
  .contact-final-page .contact-start-heading p { font-size:12px; line-height:1.5; }
  .contact-final-page .contact-start-grid { grid-template-columns:1fr; }
  .contact-final-page .contact-start-card { min-height:172px; }
  .contact-final-page .contact-closing { padding:27px 0; }
  .contact-final-page .contact-closing .contact-shell { width:calc(100% - 40px); }
  .contact-final-page .contact-closing-inner { display:block; }
  .contact-final-page .contact-closing h2 { font-size:25px; }
  .contact-final-page .contact-closing p { font-size:12px; }
  .contact-final-page .contact-closing-action { width:max-content; margin-top:17px; }
}

/* Contact execution layout: a wider inquiry card with room for project details. */
.contact-final-page .contact-hero { height:clamp(305px,29vw,420px); background-position:center 47%; }
.contact-final-page .contact-hero-copy { width:min(88%,1320px); }
.contact-final-page .contact-hero h1 { font-size:clamp(43px,4.5vw,62px); }
.contact-final-page .contact-hero-lead { max-width:640px; font-size:clamp(18px,1.8vw,26px); }
.contact-final-page .contact-hero-signature { color:rgba(255,244,225,.82); font:10px/1.55 Georgia,serif; letter-spacing:.13em; }
.contact-final-page .contact-hero-signature br { display:initial; }

.contact-final-page .contact-quick { padding:27px 0 30px; }
.contact-final-page .contact-quick-grid { gap:14px; }
.contact-final-page .contact-quick-card { display:grid; grid-template-columns:43px minmax(0,1fr); grid-template-rows:repeat(3,auto) 1fr; align-content:start; align-items:start; column-gap:12px; min-height:142px; padding:18px 15px; text-align:left; }
.contact-final-page .contact-quick-icon { grid-column:1; grid-row:1 / 5; width:36px; height:36px; border-radius:0; background:transparent; color:#b48242; }
.contact-final-page .contact-quick-icon svg { width:32px; height:32px; stroke-width:1.65; }
.contact-final-page .contact-quick-card h3,
.contact-final-page .contact-quick-card > p,
.contact-final-page .contact-quick-card > strong,
.contact-final-page .contact-quick-card > small { grid-column:2; }
.contact-final-page .contact-quick-card h3 { margin:0; font-size:15px; }
.contact-final-page .contact-quick-card > p { margin-top:5px; font-size:11px; }
.contact-final-page .contact-quick-card > strong { margin-top:12px; color:#a77237; font-size:13px; font-weight:500; }
.contact-final-page .contact-quick-card > small { margin-top:5px; padding:0; font-size:10px; }
.contact-final-page .contact-quick-card:first-child > strong,
.contact-final-page .contact-quick-card:last-child > strong { width:max-content; padding:6px 15px; border:1px solid #c9a676; border-radius:2px; font-size:11px; }

.contact-final-page .contact-inquiry { display:block; min-height:0; padding:0 0 30px; background:#f6f3ee; }
.contact-final-page .contact-inquiry-main { width:min(calc(100% - 56px),1320px); margin:0 auto; padding:27px 27px 23px; border:1px solid #eee8df; border-radius:5px; background:#fff; box-shadow:0 12px 33px rgba(68,47,24,.055); }
.contact-final-page .contact-inquiry-intro { align-items:end; min-height:0; margin-bottom:21px; }
.contact-final-page .contact-inquiry-intro h2 { font-size:clamp(28px,2.45vw,36px); }
.contact-final-page .contact-inquiry-intro .contact-eyebrow { font-size:11px; letter-spacing:.09em; }
.contact-final-page .contact-inquiry-intro > p { width:auto; max-width:420px; margin:0; color:#88837d; font-size:12px; }
.contact-final-page .contact-form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px 22px; }
.contact-final-page .contact-form-grid--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.contact-final-page .contact-field { display:flex; flex-direction:column; align-items:stretch; gap:7px; min-width:0; height:auto; border:0; border-radius:0; overflow:visible; background:transparent; }
.contact-final-page .contact-field > span { display:block; width:auto; padding:0; border:0; background:transparent; color:#3c3936; font-size:12px; font-weight:600; }
.contact-final-page .contact-field input,
.contact-final-page .contact-field select,
.contact-final-page .contact-field textarea { width:100%; min-width:0; border:1px solid #dedbd7; border-radius:3px; background:#fff; color:#252525; font-family:inherit; font-size:13px; }
.contact-final-page .contact-field input,
.contact-final-page .contact-field select { height:43px; padding:0 12px; }
.contact-final-page .contact-field select { cursor:pointer; }
.contact-final-page .contact-field input:focus,
.contact-final-page .contact-field select:focus,
.contact-final-page .contact-field textarea:focus { outline:2px solid rgba(181,132,68,.25); border-color:#b48242; background:#fffdf9; }
.contact-final-page .contact-field:focus-within { border:0; }
.contact-final-page .contact-field--country::after { display:none; }
.contact-final-page .contact-field--country input { padding-right:12px; }
.contact-final-page .contact-products { min-width:0; margin:21px 0; padding:0; border:0; }
.contact-final-page .contact-products legend { margin-bottom:11px; padding:0; color:#3c3936; font-size:12px; font-weight:600; }
.contact-final-page .contact-products em { padding-left:2px; color:#b45543; font-style:normal; }
.contact-final-page .contact-products-list { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px 10px; }
.contact-final-page .contact-products-list label { display:flex; align-items:center; gap:6px; min-width:0; font-size:11px; line-height:1.35; white-space:nowrap; cursor:pointer; }
.contact-final-page .contact-products-list input { width:16px; height:16px; flex:none; margin:0; accent-color:#ad7e3d; }
.contact-final-page .contact-attachment { margin-top:22px; }
.contact-final-page .contact-form-label { display:block; margin-bottom:8px; color:#3c3936; font-size:12px; font-weight:600; }
.contact-final-page .contact-file-dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:99px; padding:14px 18px; border:1px dashed #cfc8bf; border-radius:4px; background:#fcfbf9; text-align:center; cursor:pointer; }
.contact-final-page .contact-file-dropzone:hover,
.contact-final-page .contact-attachment:focus-within .contact-file-dropzone { border-color:#b48242; background:#fffaf2; }
.contact-final-page .contact-file-dropzone svg { width:31px; height:31px; fill:none; stroke:#9f998e; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.contact-final-page .contact-file-dropzone strong { margin-top:3px; font-size:12px; font-weight:600; }
.contact-final-page .contact-file-dropzone small { margin-top:3px; color:#8b8883; font-size:11px; line-height:1.5; }
.contact-final-page .contact-file-input { position:absolute; width:1px; height:1px; opacity:0; }
.contact-final-page .contact-file-list { margin:6px 0 0; color:#8a6137; font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.contact-final-page .contact-file-list:empty { display:none; }
.contact-final-page .contact-message { position:relative; margin-top:19px; }
.contact-final-page .contact-message textarea { min-height:105px; padding:12px; resize:vertical; line-height:1.55; }
.contact-final-page .contact-message-count { align-self:flex-end; margin-top:-25px; margin-right:10px; color:#96918a; font-size:10px; pointer-events:none; }
.contact-final-page .contact-send-button { width:min(100%,420px); height:47px; margin:29px auto 0; border-radius:3px; background:linear-gradient(90deg,#b7843e,#d0aa68); font-size:14px; }
.contact-final-page .contact-send-button:hover { background:linear-gradient(90deg,#a97636,#bc985c); }
.contact-final-page .contact-form-status { margin:12px auto 0; text-align:center; }
.contact-final-page .contact-mailto-fallback { display:block; width:max-content; margin:6px auto 0; }
.contact-final-page .contact-mailto-fallback[hidden] { display:none; }
.contact-final-page .contact-form-note { justify-content:center; margin:9px 0 0; font-size:11px; text-align:center; }
.contact-final-page .contact-form-note svg { width:14px; height:14px; }

.contact-final-page .contact-closing { background-image:linear-gradient(90deg,rgba(18,11,7,.72),rgba(18,11,7,.32) 55%,rgba(18,11,7,.06)),url('/assets/web-v3/contact-cta-infinity-pool.webp'); }

@media (max-width:1050px) {
  .contact-final-page .contact-quick-card { column-gap:8px; padding-inline:10px; }
  .contact-final-page .contact-quick-card > strong { font-size:11px; }
  .contact-final-page .contact-quick-card[href^="https://www.hkgongyuming.com/"] > strong { font-size:10px; letter-spacing:-.02em; }
}
@media (max-width:900px) {
  .contact-final-page .contact-products-list { grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }
}
@media (max-width:800px) {
  .contact-final-page .contact-hero { height:340px; }
  .contact-final-page .contact-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contact-final-page .contact-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contact-final-page .contact-inquiry-intro { align-items:start; }
}
@media (max-width:620px) {
  .contact-final-page .contact-hero { height:370px; }
  .contact-final-page .contact-hero-copy { width:calc(100% - 40px); padding:38px 0 28px; }
  .contact-final-page .contact-hero-lead { font-size:18px; }
  .contact-final-page .contact-quick-grid { grid-template-columns:1fr; }
  .contact-final-page .contact-quick-card { min-height:114px; padding:15px 18px; }
  .contact-final-page .contact-quick-card > strong { overflow-wrap:anywhere; }
  .contact-final-page .contact-inquiry-main { width:calc(100% - 28px); padding:21px 16px; }
  .contact-final-page .contact-inquiry-intro { display:block; }
  .contact-final-page .contact-inquiry-intro > p { margin-top:9px; }
  .contact-final-page .contact-inquiry-intro > p br { display:none; }
  .contact-final-page .contact-form-grid,
  .contact-final-page .contact-form-grid--two { grid-template-columns:1fr; gap:14px; }
  .contact-final-page .contact-products-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contact-final-page .contact-products-list label { white-space:normal; }
  .contact-final-page .contact-file-dropzone small { max-width:310px; }
  .contact-final-page .contact-form-note { align-items:flex-start; text-align:left; }
}

/* Short contact form (2026-10-27): send by WhatsApp or email; files go through the upload page. */
.contact-upload-hint { margin:16px 0 0; color:#6b675e; font-size:13px; }
.contact-upload-hint a { color:#9a6a2e; text-underline-offset:3px; }
.contact-send-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:26px; }
.contact-send-actions .contact-send-button { flex:1 1 200px; width:auto; max-width:300px; margin:0; }
.contact-send-button--outline { border:1px solid #c49a5a!important; background:#fff!important; color:#8a5c22!important; }
.contact-send-button--outline:hover { background:#fffaf2!important; }