/* ============================================================
   message.html 在线留言页样式
   布局：Hero → 大表单 + 联系卡 → 填写建议 → FAQ → 底部电话 CTA
   ============================================================ */

.m-hero{position:relative;min-height:64vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:150px 0 90px;overflow:hidden}
.m-hero-bg{z-index:0}
.m-hero-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,20,20,.72),rgba(20,20,20,.6));}
.m-hero-inner{position:relative;z-index:2;color:#fff;max-width:720px}
.m-hero .crumb{display:inline-flex;align-items:center;gap:10px;font-size:13px;margin-bottom:22px;color:#E9E2D6}
.m-hero .crumb a{color:#E9E2D6}
.m-hero .crumb a:hover{color:var(--coffee-bright)}
.m-hero .crumb em{font-style:normal;color:var(--coffee-bright)}
.m-hero-title{font-size:clamp(34px,5vw,58px);font-weight:900;color:#fff;line-height:1.15;margin-bottom:18px}
.ht-gold{background:linear-gradient(120deg,#E9D3A8,#C9A87C);-webkit-background-clip:text;background-clip:text;color:transparent}
.m-hero-sub{font-size:16px;color:#EDE6DA;line-height:1.9;margin-bottom:32px}

/* 表单 + 侧栏 */
.m-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start}
.form-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:44px 42px;box-shadow:var(--shadow-sm);
}
.form-head h2{font-size:26px;margin:6px 0 8px}
.form-head p{font-size:14px;color:var(--text-2);margin-bottom:30px}

.l-form{display:block}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f-field{margin-bottom:18px;display:flex;flex-direction:column}
.f-full{grid-column:1/-1}
.f-field label{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px}
.f-field input,.f-field select,.f-field textarea{
  width:100%;padding:14px 16px;font-size:15px;font-family:inherit;color:var(--ink);
  border:1.5px solid var(--line);border-radius:12px;background:#FBF8F2;
  transition:border-color .3s, box-shadow .3s;outline:none;resize:vertical;
}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{
  border-color:var(--coffee);box-shadow:0 0 0 4px rgba(201,168,124,.18);background:#fff;
}
.btn-block{width:100%;margin-top:6px}
.f-note{font-size:12px;color:var(--text-2);line-height:1.7;margin-top:14px;text-align:center}

/* 侧栏联系卡 */
.m-side{display:flex;flex-direction:column;gap:24px}
.contact-card{
  background:var(--grad-ink);color:#fff;border-radius:var(--radius-lg);padding:34px 30px;
}
.contact-card h3{color:#fff;font-size:18px;margin-bottom:14px}
.c-tel{
  display:block;font-size:36px;font-weight:900;color:var(--coffee-bright);
  line-height:1.1;letter-spacing:.02em;margin-bottom:6px;
}
.c-tel:hover{color:#fff}
.c-sub{font-size:13px;color:#B7AE9E;margin-bottom:24px}
.c-list{display:flex;flex-direction:column;gap:16px}
.c-list li{display:flex;gap:12px;align-items:flex-start}
.c-list svg{width:19px;height:19px;color:var(--coffee);flex-shrink:0;margin-top:3px}
.c-list b{display:block;font-size:12px;color:var(--coffee-bright);margin-bottom:2px}
.c-list a{color:#fff;font-size:14px;font-weight:600}
.c-list a:hover{color:var(--coffee-bright)}
.c-list span{font-size:14px;color:#EDE6DA}

.promise-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px;box-shadow:var(--shadow-sm);
}
.promise-card h3{font-size:16px;margin-bottom:16px}
.promise-card li{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.promise-card li:last-child{border-bottom:none}
.promise-card b{font-size:20px;color:var(--coffee-deep);min-width:52px}
.promise-card span{font-size:13.5px;color:var(--text-2)}

/* 填写建议 */
.tips-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.tip-card{
  background:#fff;border-radius:var(--radius-md);padding:30px 26px;
  border:1px solid var(--line);transition:all .35s;
}
.tip-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.tip-no{font-size:34px;font-weight:900;font-style:italic;color:var(--coffee-bg-2);font-family:Georgia,serif;display:block;margin-bottom:12px}
.tip-card h3{font-size:17px;margin-bottom:8px}
.tip-card p{font-size:13.5px;color:var(--text-2);line-height:1.8}

/* FAQ */
.acc-item{
  background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:14px;
  overflow:hidden;transition:box-shadow .3s;
}
.acc-item.open{box-shadow:var(--shadow-md);border-color:var(--coffee-bright)}
.acc-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  text-align:left;padding:18px 22px;font-size:15.5px;font-weight:700;color:var(--ink);background:transparent;
}
.acc-ic{position:relative;width:22px;height:22px;flex-shrink:0;border-radius:50%;background:var(--coffee-bg);transition:all .35s}
.acc-ic::before,.acc-ic::after{content:"";position:absolute;background:var(--coffee-deep);border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%)}
.acc-ic::before{width:10px;height:2px}
.acc-ic::after{width:2px;height:10px}
.acc-item.open .acc-ic{background:var(--grad-coffee)}
.acc-item.open .acc-ic::before,.acc-item.open .acc-ic::after{background:#fff}
.acc-item.open .acc-ic::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,.68,.4,1)}
.acc-panel p{padding:0 22px 20px;font-size:14.5px;color:var(--text-2);line-height:1.95}

/* 底部电话条 */
.m-footcta{background:var(--grad-coffee);padding:70px 0;text-align:center}
.footcta-inner h2{color:#fff;font-size:clamp(24px,3.4vw,36px);margin-bottom:24px}
.btn-xl{padding:20px 52px;font-size:18px}
.m-footcta p{color:#fff;margin-top:18px;font-size:14px}
.m-footcta p a{text-decoration:underline}

@media (max-width:960px){
  .m-grid{grid-template-columns:1fr}
  .tips-row{grid-template-columns:1fr}
}
@media (max-width:600px){
  .f-row{grid-template-columns:1fr}
  .form-card{padding:30px 22px}
}