/* ============================================================
   yuyue.html 在线预约独有样式
   ============================================================ */

/* ---------- Hero ---------- */
.yy-hero{position:relative;padding:150px 0 70px;background:var(--c2);overflow:hidden}
.yy-hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:30%;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;opacity:.5}
.yy-hero::after{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border:24px solid rgba(224,91,32,.06);border-radius:50%}
.yy-hero__inner{position:relative;z-index:2}
.yy-hero h1{font-size:clamp(32px,4.4vw,52px);font-weight:900;margin-top:14px}
.yy-hero p{max-width:560px;color:var(--g4);margin-top:16px}

/* ---------- Tabs ---------- */
.tabs__btns{display:inline-flex;gap:0;border:1px solid var(--line-d);margin-bottom:34px}
.tabs__btn{padding:14px 34px;font-size:15px;font-weight:700;color:var(--g4);transition:all .25s}
.tabs__btn.is-active{background:var(--o1);color:#fff}
.tabs__btn:not(.is-active):hover{color:var(--white);background:rgba(255,255,255,.04)}
.tabs__pane{display:none}
.tabs__pane.is-active{display:block;animation:yy-fade .4s ease}
@keyframes yy-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- 双表单 ---------- */
.yy-form__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:start}
.yy-form__info h2{font-size:26px;margin-bottom:14px}
.yy-form__info > p{color:var(--g4);margin-bottom:22px}
.yy-form__info ul{display:grid;gap:13px}
.yy-form__info li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--g4)}
.yy-form__info li svg{color:var(--o1);flex-shrink:0}
.yy-form__box{background:var(--c3);border:1px solid var(--line-d);padding:34px}
.yy-form__box h3{font-size:19px;margin-bottom:22px;padding-bottom:14px;border-bottom:1px dashed var(--line-d)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---------- 预约后流程（带图 5 步） ---------- */
.yy-steps__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start}
.yy-steps__img{margin:0;position:relative}
.yy-steps__img img{width:100%;height:420px;object-fit:cover;filter:saturate(.9)}
.yy-steps__img figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 18px 14px;background:linear-gradient(180deg,transparent,rgba(15,17,19,.9));font-size:12.5px;color:var(--g4);letter-spacing:.05em}
.yy-steps__list{list-style:none;display:grid;gap:0;counter-reset:yy}
.yy-steps__list li{display:flex;gap:20px;padding:16px 0;border-bottom:1px dashed rgba(168,181,152,.18)}
.yy-steps__list li:last-child{border-bottom:none}
.yy-steps__list li span{font-family:var(--font-en);font-size:26px;font-weight:900;color:transparent;-webkit-text-stroke:1.5px var(--o1);flex-shrink:0;line-height:1.1}
.yy-steps__list h3{font-size:16px;margin-bottom:6px}
.yy-steps__list p{font-size:13.5px;color:var(--g4)}

/* ---------- 预约 vs 自己瞎跑 对比表 ---------- */
.yy-vs .tbl td:nth-child(2){color:#9C8A82}
.yy-vs .tbl td:nth-child(3){color:#2C3A26;font-weight:600}

/* ---------- 回电时效 / 服务承诺条 ---------- */
.yy-promise{padding:26px 0;background:var(--c2);border-bottom:1px solid var(--line-d)}
.yy-promise__band{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.yy-promise__item{border-left:2px solid var(--o1);padding:6px 0 6px 16px}
.yy-promise__item b{display:block;font-size:16px;margin-bottom:4px}
.yy-promise__item span{font-size:12.5px;color:var(--g4)}

/* ---------- 为什么预约好 ---------- */
.yy-why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* ---------- 预约须知（米白） ---------- */
.yy-note__grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line-l)}
.yy-note__row{padding:28px 30px;border-right:1px dashed var(--line-l);border-bottom:1px dashed var(--line-l)}
.yy-note__row:nth-child(2n){border-right:none}
.yy-note__row:nth-child(n+3){border-bottom:none}
.yy-note__row h3{font-size:16px;color:var(--c1);margin-bottom:10px}
.yy-note__row p{font-size:14px;color:#4C5449}

/* ---------- 手风琴复用 contact 视觉，此处补充间距 ---------- */

/* ---------- 城市服务点（米白） ---------- */
.yy-city__grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.yy-city__card{background:#fff;border:1px solid var(--line-l);box-shadow:0 12px 30px rgba(20,24,27,.08);transition:transform .3s,box-shadow .3s}
.yy-city__card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(20,24,27,.14)}
.yy-city__card img{width:100%;height:220px;object-fit:cover}
.yy-city__body{padding:22px 26px 26px}
.yy-city__body h3{font-size:19px;color:var(--c1);margin:12px 0 8px}
.yy-city__body p{font-size:14px;color:#6A7268}

/* ---------- 页底 CTA ---------- */
.yy-cta{background:var(--c2);border-top:1px solid var(--line-d)}
.yy-cta__inner{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.yy-cta__inner img{width:100%;height:320px;object-fit:cover;clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)}
.yy-cta h2{font-size:clamp(26px,3.2vw,40px);font-weight:900;margin-top:14px}
.yy-cta p{color:var(--g4);margin:14px 0 26px}
.yy-cta__btns{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- 手风琴（基类样式，本页独立加载） ---------- */
.acc{max-width:860px;margin:0 auto}
.acc__item{border:1px solid var(--line-d);background:var(--c2);margin-bottom:12px}
.acc__head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 26px;font-size:16px;font-weight:700;color:var(--white);text-align:left}
.acc__plus{font-family:var(--font-en);font-size:22px;color:var(--o1);transition:transform .3s;flex-shrink:0}
.acc__item.is-open .acc__plus{transform:rotate(45deg)}
.acc__body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.acc__item.is-open .acc__body{max-height:300px}
.acc__body p{padding:0 26px 22px;font-size:14px;color:var(--g4)}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .yy-form__grid{grid-template-columns:1fr;gap:28px}
  .yy-why__grid{grid-template-columns:1fr}
  .yy-city__grid{grid-template-columns:1fr}
  .yy-cta__inner{grid-template-columns:1fr;gap:28px}
  .yy-steps__grid{grid-template-columns:1fr;gap:28px}
  .yy-promise__band{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .yy-hero{padding:120px 0 44px}
  .form-row{grid-template-columns:1fr;gap:0}
  .yy-note__grid{grid-template-columns:1fr}
  .yy-note__row{border-right:none;border-bottom:1px dashed var(--line-l)!important}
  .tabs__btns{display:flex;width:100%}
  .tabs__btn{flex:1;padding:13px 10px;font-size:14px}
  .yy-form__box{padding:24px 20px}
}