:root{
  /* 品牌色 */
  --brand:#c8642b;
  --brand-dark:#a84f1f;
  --brand-light:#fdf3ec;
  --ink-soft:#3a352e;      /* 辅助深炭：小标题/分割线/图标，统一不用金 */
  --ink:#23211d;
  --ink-3:#6b7280;
  --ink-2:#6f6f68;
  --line:#ece5da;
  --line-soft:#f3ede3;
  --bg:#ffffff;
  --bg-2:#f7f3ec;           /* 交替底色：米白 */
  --bg-warm:#efe3d1;        /* 暖米：舒缓板块（与白明显区分） */
  --bg-deep:#241d16;        /* 深色：强板块 */
  --radius:12px;
  --radius-lg:18px;
  --maxw:1200px;
  --gap:22px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;

  /* ===== 排版系统（竞品质感）=====
     板块分割：大留白 + 相邻底色通栏交替（非硬线）
     板块间距：手机56 / 平板72 / 桌面80 / 大屏96
     行间距：正文1.6 小字1.6 标题1.3 段落16px */
  --space-section:56px;
  --space-block:30px;      /* 标题 → 内容 */
  --space-para:16px;
  --lh:1.65;
}
@media(min-width:768px){:root{--space-section:72px}}
@media(min-width:1024px){:root{--space-section:80px}}
@media(min-width:1440px){:root{--space-section:96px}}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:var(--lh);font-size:15px;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

/* ============ 布局 / 板块（通栏，底色交替靠 .alt） ============ */
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.section{padding-top:var(--space-section);padding-bottom:var(--space-section)}
.section.alt{background:var(--bg-2)}
.section.warm{background:var(--bg-warm)}
.section.deep{background:radial-gradient(125% 110% at 82% 0%,#352a1f 0%,var(--bg-deep) 58%);color:#fff}
.section.deep .section-title,.section.deep .section-sub{color:#fff}
.section.deep .section-sub{opacity:.82}
.section.deep .eyebrow{color:var(--brand-light)}
.section.tight{padding-top:14px;padding-bottom:14px}

/* 深底块内的 CTA 按钮：强调橙，不铺大橙背景（收敛原则） */
.section.deep .btn-primary{background:var(--brand);color:#fff}
.section.deep .btn-primary:hover{background:var(--brand-dark);text-decoration:none}
.section.deep .btn-ghost{color:#fff;border-color:rgba(255,255,255,.68)}
.section.deep .btn-ghost:hover{background:rgba(255,255,255,.12);text-decoration:none}

/* 深底实景锚点块（mid-page 视觉重音，留 craft.webp 槽位，无图自动深底兜底） */
.section.photo{position:relative;color:#fff;background:var(--bg-deep);overflow:hidden}
.section.photo .container{position:relative;z-index:1}
.section.photo .section-title,.section.photo .section-sub{color:#fff}
.section.photo .section-sub{opacity:.85}
.section.photo .eyebrow{color:var(--brand-light)}
.section.photo .card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.section.photo .card:hover{box-shadow:0 16px 40px rgba(0,0,0,.28)}
.section.photo .card h3{color:#fff}
.section.photo .card p{color:rgba(255,255,255,.82)}
.section.photo .card-link{color:var(--brand-light)}
.section-head{margin-bottom:var(--space-block);max-width:780px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;letter-spacing:.12em;color:var(--brand);margin-bottom:14px;text-transform:uppercase}
.eyebrow::before{content:"";width:20px;height:2px;background:var(--brand);border-radius:2px;flex-shrink:0}
.section-title{font-size:27px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.section-sub{color:var(--ink-2);font-size:15px;margin-top:12px;line-height:1.7;font-weight:500}
@media(min-width:1024px){
  .section-title{font-size:32px}
  .section-head{margin-bottom:48px}
}

/* ============ 顶部导航 ============ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;background:linear-gradient(to bottom,rgba(28,20,15,.48) 0%,rgba(28,20,15,.42) 78%,rgba(28,20,15,0) 100%);backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px);border-bottom:0}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:18px;color:#fff;letter-spacing:-.01em}
/* 品牌名禁折行：平板 768 临界宽度下会被 flex 压到 71px，4 个 18px 汉字差 1px 就换行 */
.logo__name{white-space:nowrap}
.logo__img{display:block;width:auto;height:28px;border-radius:7px;flex:0 0 auto}
.logo__name{display:inline-block;position:relative;top:-1px}
.logo b{color:#f0a06a}
@media(min-width:768px){.logo{gap:10px}.logo__img{height:34px}}
.nav-links{display:none;gap:26px;list-style:none;align-items:center}
/* 【2026-09-11 修正】汉字字形在字体盒里天然偏下（字体 ascent/descent 按西文设计），
   实测菜单文字墨迹中心比导航条中线低 1.8px、比 logo 图标低 2px，肉眼看着"坐在下半截"。
   这里做上移补偿，让文字与 logo 图标视觉齐平 */
.nav-links a{color:var(--ink);font-size:14px;font-weight:500;position:relative;top:-0.5px}
.nav-links a:hover{color:var(--brand);text-decoration:none}
.nav-cta{display:none}
/* 电话入口：细线方框图标，PC 带号码文字，窄屏只留图标 */
.nav-tel{display:flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 9px;border:1px solid rgba(255,255,255,.26);border-radius:9px;color:rgba(255,255,255,.88);flex:0 0 auto;text-decoration:none}
.nav-tel svg{width:17px;height:17px}
.nav-tel .tel-num{display:none;font-size:14px;font-weight:600;letter-spacing:.02em}
.nav-tel:hover{border-color:rgba(255,255,255,.55);color:#fff;text-decoration:none}
/* 微信入口：细线方框小图标 + 弹出式二维码卡（朗润做法：二维码是工具不是页面内容） */
.nav-wx{position:relative;display:flex;align-items:center;flex:0 0 auto}
.wx-toggle{position:absolute;opacity:0;pointer-events:none;left:-9999px}
.wx-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid rgba(255,255,255,.26);border-radius:9px;color:#07c160;cursor:pointer;background:#fff}
.wx-icon svg{width:18px;height:18px}
.wx-icon:hover{border-color:#4ade80;background:rgba(7,193,96,.18)}
/* 弹出卡：默认隐藏（铁律：媒体查询外必写基础 display:none） */
.wx-pop{display:none}
.wx-mask{display:none}
.menu-details{position:relative;display:flex;align-items:center;gap:12px;min-width:0}
/* 主入口快捷条（首页/案例/在建工地/设计师/施工团队/工艺/报价）：全端常驻。
   <768 flex:1 横滑；≥768 常驻横排，空间不足时仍可横滑（平板窄档保命）。
   次要入口（干货/关于/联系/微信）收进汉堡面板 */
.nav-quick{display:flex;list-style:none;gap:18px;align-items:center;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 2px}
.nav-quick::-webkit-scrollbar{display:none}
.nav-quick a{color:rgba(255,255,255,.92);font-size:14px;font-weight:600;white-space:nowrap;position:relative;top:-0.5px}
.nav-quick a:hover{color:#f0a06a;text-decoration:none}
/* 汉堡面板里的微信项：绿色标识 */
.nav-toggle:checked ~ .nav-links a.nl-wx{color:#07c160;font-weight:600}
/* 手机导航开关：checkbox + label 纯 CSS 开关
   ⚠️ 不用 <details>：闭合的 details 内容会被浏览器的 UA 机制隐藏，
      ≥768px 时汉堡按钮又 display:none → 导航永远打不开（2026-09-11 修的线上事故） */
.nav-toggle{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none}
.menu-btn{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:0;cursor:pointer;user-select:none;border:0;
  /* 🔴 字形兜底：label 内不允许出现任何文字（历史事故：HTML 残留 ☰ 字符与背景 SVG 三条杠
     叠成双层，深色字形就是方哥截图里的"脏东西"）。font-size:0+color:transparent 双保险，
     PC 端「更多」二字由 ::after 提供（768 断点内显式恢复 font-size/color） */
  font-size:0;color:transparent;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path stroke='%23fff' stroke-width='2' stroke-linecap='round' d='M4 7h16M4 12h16M4 17h16'/></svg>") no-repeat center/24px;background-color:transparent}
.menu-btn:hover,.nav-toggle:checked ~ .menu-btn{background-color:rgba(255,255,255,.28)}
.nav-toggle:focus-visible + .menu-btn{outline:2px solid var(--brand);outline-offset:2px}
/* 手机：默认收起，勾选后展开下拉面板 */
.nav-toggle:checked ~ .nav-links{display:flex;flex-direction:column;gap:0;position:absolute;top:58px;right:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:6px 0;min-width:190px;box-shadow:0 12px 34px rgba(0,0,0,.10);z-index:60;max-height:calc(100vh - 74px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.nav-toggle:checked ~ .nav-links li{padding:0}
.nav-toggle:checked ~ .nav-links a{display:block;padding:11px 20px}
.nav-toggle:checked ~ .nav-links .btn{margin:6px 20px 10px}
/* 手机端：主入口横滑条（可左右滑动），次要入口（干货/关于/联系）收进汉堡。
   .nav-links 是绝对定位浮层，不占位，所以能和 .nav-quick 并存 */
/* 手机端（≤767）：顶部极简——只留 LOGO + 汉堡，全部入口收进下拉抽屉
   🔴 抽屉用 opacity 折叠（不是 display:none / visibility:hidden）：内容仍留在渲染树里，对 AI / 搜索抓取更友好
   🔴 汉堡按钮靠负偏移挪回 header 右上（.menu-details 已是 absolute，成为它的定位参照）：
      top = 11 - 65 = -54 / right = 20 - 12 = 8，改抽屉的 top:65px 或 right:12px 时这两个值要同步 */
@media(max-width:767px){
  .menu-btn{position:absolute;top:-54px;right:8px;z-index:3;pointer-events:auto}
  .menu-details{
    position:absolute;top:65px;right:12px;left:12px;
    display:flex;flex-direction:column;align-items:stretch;
    gap:0;margin:0;min-width:0;
    background:transparent;border:1px solid transparent;border-radius:16px;
    box-shadow:none;
    padding:6px 0;
    pointer-events:none;
    transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease;
    /* 🔴 三个坑都记着：
       ①不能 overflow:hidden / max-height:0 折叠——汉堡是它的 absolute 子元素会被裁掉；
       ②不能 transform 位移折叠——汉堡跟着抽屉一起上下跳；
       ③🔴 更不能给 .menu-details 整体 opacity:0 —— 汉堡是它的子元素，会被一起藏成"点得到但看不见"
         （2026-09-13 方哥报"右上角三条杠怎么不显示"就是这个 bug）。
       正确姿势：容器只收起底色/边框/阴影 + pointer-events:none，透明度折叠下放给 .nav-quick / .nav-links，
       汉堡自己保持 opacity:1，并显式 pointer-events:auto（否则继承不到点击）。 */
  }
  .menu-details:has(.nav-toggle:checked){
    background:#fff;border-color:var(--line);
    box-shadow:0 18px 44px rgba(31,20,16,.16);pointer-events:auto}
  .nav-quick,.nav-links{opacity:0;transition:opacity .2s ease}
  .menu-details:has(.nav-toggle:checked) .nav-quick,
  .menu-details:has(.nav-toggle:checked) .nav-links{opacity:1}
  .nav-quick{display:flex;flex-direction:column;align-items:stretch;gap:0;flex:none;padding:0;overflow:visible}
  .nav-quick li{border-top:1px solid rgba(31,20,16,.06)}
  .nav-quick li:first-child{border-top:0}
  .nav-quick a{color:var(--ink);font-size:15px;font-weight:500;white-space:normal;position:static;display:block;padding:12px 20px}
  .nav-quick a:hover{color:var(--brand);text-decoration:none}
  /* 次要入口（干货/联系）接在主入口下面，与主入口拼成同一个抽屉
     🔴 align-items 必须显式 stretch：基础样式(第91行)的 center 会漏下来，
        把每个条目缩成文字宽挤在中间（2026-09-14 方哥截图"抽屉缩成一坨"事故） */
  .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;min-width:0;width:100%}
  .nav-toggle:checked ~ .nav-links{position:static;display:flex;flex-direction:column;gap:0;border:0;background:none;box-shadow:none;min-width:0;padding:0;border-radius:0}
  .nav-links li{border-top:1px solid rgba(31,20,16,.06)}
  .nav-links li.nav-cta-item{display:none}
  .nav-links a{display:block;padding:12px 20px;font-size:15px;top:0}
  /* 底部悬浮 CTA 已有电话+微信，顶部不再重复 */
  .nav-tel{display:none}
  .nav-wx{display:none}
  /* 页脚精简：只留品牌介绍 + 二维码 + 备案行（快速导航 / 联系信息列收起） */
  .footer-grid{grid-template-columns:1fr;gap:0}
  .ft-nav,.ft-contact{display:none}
  .site-footer{padding:52px 0 0}
}
/* 超窄屏（≤359px，老 iPhone SE/5）：logo 只留图标，快捷区留够宽度 */
@media(max-width:359px){
  .logo__name{display:none}
  .nav-quick{gap:14px}
  .nav-quick a{font-size:13.5px}
  .menu-details{margin-left:12px;gap:8px}
}
/* 电话+微信容器（2026-09-13 仿朗润：从 menu-details 移出，≥768 固定到导航最右）
   🔴 基础 display:none 写在媒体查询外（铁律：仅某断点显示的类必须在基础样式声明） */
.nav-right{display:none}
/* 平板/PC：≥768 主入口常驻横排（6 项）；「更多」纯文字收纳 干货/报价/关于/联系；
   电话+微信贴最右；menu-details 用 auto margin 居中（nav-links 下拉 right:0 恰好锚在「更多」下方） */
@media(min-width:768px){
  .nav-links a{white-space:nowrap}
  .nav-right{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:12px}
  /* 2026-09-14 方哥钦点（仿朗润）：导航项间距拉大（原 18px 太挤、两侧大空白），
     「更多」与主项同距，视觉上是一排均匀的导航 */
  .menu-details{margin:0 auto;gap:30px}
  /* 6 主项全档位都放得下：关掉横滑裁切，active 白线（::after 出界部分）才能露出来 */
  .nav-quick{overflow:visible;padding:0;gap:30px}
  /* 当前栏目白线呼应（朗润式）：文字变纯白 + 下方 2.5px 白线 */
  .nav-quick a.active{color:#fff}
  .nav-quick a.active::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2.5px;background:#fff;border-radius:2px}
}
/* 平板窄档（768–1023）：电话收成图标腾宽度，导航间距 20px；再不够就横滑 */
@media(min-width:768px) and (max-width:1023px){
  .nav-quick{gap:20px}
  .nav-quick a{font-size:13.5px;top:-2px}
  .menu-details{gap:20px}
}
/* 桌面 ≥1024：logo 左 / 主菜单+更多居中（auto margin 居中）/ 电话+微信最右（布局见 768 块） */
@media(min-width:1024px){
  /* PC 主菜单字体加大加重，更明显 */
  .nav-quick a{font-size:15px}
}
@media(min-width:1024px) and (max-width:1279px){
  .nav-quick{gap:30px}
  .nav-quick a{font-size:14px}
}
/* ≥1280 大屏：间距再升一档，朗润式舒展 */
@media(min-width:1280px){
  .nav-quick{gap:36px}
  .menu-details{gap:36px}
  .nav-quick a{font-size:15px}
}

/* ============ 按钮 ============ */
.btn{display:inline-block;padding:13px 26px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:background .2s ease,transform .15s ease}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark);text-decoration:none}
.btn-ghost{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.btn-ghost:hover{background:var(--brand-light);text-decoration:none}
.btn-sm{padding:9px 18px;font-size:14px}

/* ============ Hero / Banner ============ */
.hero{position:relative;background:#2a211a url("hero.webp") center/cover no-repeat;color:#fff;padding:calc(var(--space-section) + 95px) 0 calc(var(--space-section) + 10px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(102deg,rgba(36,29,22,.93) 0%,rgba(36,29,22,.70) 46%,rgba(200,100,43,.28) 100%);z-index:0}
.hero .container{position:relative;z-index:1}
.hero h1{font-size:35px;font-weight:800;line-height:1.18;letter-spacing:-.02em;margin-bottom:18px;color:#fff}
.hero .lead{font-size:17px;color:rgba(255,255,255,.9);max-width:660px;margin-bottom:28px;line-height:1.78}
.hero .stats{border-top-color:rgba(255,255,255,.18)}
.hero .stats .lbl{color:rgba(255,255,255,.78)}
@media(min-width:1024px){.hero h1{font-size:46px}}
/* 工地带：整段深色，解决悬空 + 挤（深色从左右边缘铺到边缘，不再是白底里的孤岛） */
.banner-sec{position:relative;background:var(--bg-deep);color:#fff;padding:80px 0}
.banner-row{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.banner-cap{color:#fff}
.banner-cap .b-tag{display:inline-block;font-size:13.5px;font-weight:700;letter-spacing:.08em;background:var(--brand);color:#fff;padding:5px 14px;border-radius:999px;margin-bottom:18px}
.banner-cap h3{color:#fff;font-size:30px;font-weight:800;line-height:1.3;margin-bottom:16px}
.banner-cap p{color:rgba(255,255,255,.84);font-size:15px;line-height:1.8;margin-bottom:24px;max-width:440px}
.banner-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 22px 54px rgba(0,0,0,.38);aspect-ratio:4/3}
.banner-media img{width:100%;height:100%;object-fit:cover;display:block}
/* 平板：单栏，图在上（先看工地叙事） */
@media(max-width:768px){
  .banner-sec{padding:56px 0}
  .banner-row{grid-template-columns:1fr;gap:30px}
  .banner-media{order:-1;aspect-ratio:16/9}
  .banner-cap h3{font-size:26px}
  .banner-cap p{max-width:none}
}
/* 手机：再收紧间距，避免占地方 */
@media(max-width:560px){
  .banner-sec{padding:44px 0}
  .banner-row{gap:22px}
  .banner-cap h3{font-size:23px}
  .banner-cap p{font-size:14px;margin-bottom:20px}
}

/* ============ 内页深色头图带（每个内页顶部重音，制造节奏） ============ */
.page-hero{position:relative;background:linear-gradient(120deg,#2a2018,#3a2c20);color:#fff;padding:115px 0 56px;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 130% at 82% 0%,rgba(200,100,43,.38),transparent 58%)}
.page-hero .container{position:relative;z-index:1}
.page-hero .crumb{font-size:13.5px;color:rgba(255,255,255,.78);margin-bottom:10px;letter-spacing:.02em}
.page-hero .crumb a{color:rgba(255,255,255,.8)}

/* 返回上一步按钮（2026-09-13 改版）
   PC/平板：顶部导航 + 面包屑已足够定位，返回按钮冗余 → 隐藏
   （HTML 链接保留，只读源码的爬虫零影响）
   手机端：收成左上角白色小箭头，指向固定上级栏目页（不用 history.back，深链进入也有去处） */
.back-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);color:var(--ink);font-size:14px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.06);transition:all .18s ease;text-decoration:none;margin-bottom:12px;backdrop-filter:blur(6px)}
.back-btn:hover{background:#fff;color:var(--brand-dark);border-color:var(--brand);transform:translateX(-2px)}
.back-btn svg{width:14px;height:14px;flex-shrink:0}
@media(min-width:768px){
  .back-btn{display:none}
}
@media(max-width:767px){
  /* 手机端返回箭头已升级为顶栏 .hd-mback（见下方二级页顶栏节）；
     此处保留 hero 内联回退样式，仅服务于未来无 hd-mtitle 的页面。
     🔴 别改成 fixed：祖先 .container 是 z-index:1 层叠上下文，fixed 会被 header 毛玻璃糊住（实测踩坑） */
  .back-btn{background:transparent;border:0;box-shadow:none;backdrop-filter:none;color:#fff;padding:0;width:40px;height:40px;justify-content:center;margin:0 0 6px -8px}
  .back-btn span{display:none}
  .back-btn svg{width:22px;height:22px}
  .back-btn:hover{background:transparent;color:#fff;transform:none}
}

/* ===== 手机端二级/三级页顶栏（2026-09-13 方哥钦点，仿朗润）=====
   非 index 页 ≤767：顶栏只留「返回箭头 + 页面名居中」，LOGO 和汉堡/抽屉整体隐藏
   —— HTML 全保留仅 CSS 隐藏（铁律 7：隐藏≠删除）。首页不受影响（index 不注入）。
   🔴 箭头 .hd-mback 必须注入 header 内渲染，不能复用 hero 里的 .back-btn 再 fixed——
      它的祖先 .container 是 z-index:1 的层叠上下文，整个 container 都压在
      header(z-50) 毛玻璃之下，fixed 出来也会被糊成隐形（实测踩坑）。
   🔴 隐藏规则必须包在 ≤767 媒体查询里：PC/平板二级页要正常显示 LOGO+主导航 */
@media(max-width:767px){
  body:has(.hd-mtitle) .site-header .logo,
  body:has(.hd-mtitle) .site-header .menu-details{display:none}
}
/* 基础 display:none 写在媒体查询外（铁律） */
.hd-mtitle,.hd-mback{display:none}
@media(max-width:767px){
  .hd-mtitle{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    color:#fff;font-size:16.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
    max-width:52%;overflow:hidden;text-overflow:ellipsis;z-index:2}
  .hd-mback{display:flex;align-items:center;justify-content:center;position:absolute;
    top:12px;left:10px;width:44px;height:40px;color:#fff;z-index:3;text-decoration:none}
  .hd-mback svg{width:24px;height:24px}
  .hd-mback:hover{color:#fff;text-decoration:none}
  /* hero 里的旧 .back-btn 在手机二级页已被顶栏箭头取代 → 藏掉（防重复入口）；
     保留 :has 守卫：未来无 hd-mtitle 的页面仍回退到 hero 箭头 */
  body:has(.hd-mtitle) .back-btn{display:none}
}
.page-hero h1{font-size:27px;font-weight:800;line-height:1.25;color:#fff;letter-spacing:-.01em}
.page-hero p{margin-top:10px;font-size:15px;line-height:1.7;color:rgba(255,255,255,.85);max-width:640px;font-weight:500}
@media(min-width:1024px){.page-hero{padding:129px 0 72px}.page-hero h1{font-size:34px}}

/* ============ 数据条 ============ */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.stats>div{text-align:center}
.stats .num{font-size:26px;font-weight:800;color:var(--brand);line-height:1.1;letter-spacing:-.01em}
.stats .lbl{font-size:14px;color:var(--ink-2);margin-top:6px;line-height:1.6;font-weight:500}
@media(min-width:1024px){
  .stats{grid-template-columns:repeat(4,1fr);gap:0}
  .stats>div{position:relative}
  .stats>div+div::before{content:"";position:absolute;left:-12px;top:10%;bottom:10%;width:1px;background:var(--line)}
  .stats .num{font-size:30px}
  .stats .lbl{font-size:14px;font-weight:500}
}

/* ============ 网格（多端密度，不一刀切） ============ */
/* 通用回退：手机2 / 平板3 / 桌面3（服务区等轻量卡） */
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
/* 案例 多端密度：手机2 / 平板3 / 桌面4（递增自然） */
.grid-cases{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
.grid-cases .card .card-body{padding:14px}
.grid-cases .card h3{font-size:15px;line-height:1.6}
.grid-cases .card p{font-size:14px;margin-top:6px}
.grid-cases .card .tag{font-size:13.5px;padding:3px 7px}
@media(min-width:768px){
  .grid-cases{gap:var(--gap);grid-template-columns:repeat(3,1fr)}
  .grid-cases .card .card-body{padding:18px}
  .grid-cases .card h3{font-size:17px}
}
@media(min-width:1024px){.grid-cases{grid-template-columns:repeat(4,1fr)}}
/* 文章（图轻 16:9）手机就 2 列紧凑 */
.grid-articles{display:grid;gap:var(--gap);grid-template-columns:repeat(2,1fr)}
@media(min-width:1024px){.grid-articles{grid-template-columns:repeat(3,1fr)}}
/* 设计师（轻量人物卡）手机2 / 平板3 / 桌面4，不占整屏 */
.grid-designers{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.grid-designers{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.grid-designers{grid-template-columns:repeat(4,1fr)}}

/* 设计师图文大卡（首页/列表页通用，复用 .card 质感 + 大头像 + 信息层级） */
.designer-card-v2{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.designer-card-v2:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.09);text-decoration:none}
.designer-card-v2 .d-cover{position:relative;aspect-ratio:1/1;overflow:hidden;background:linear-gradient(135deg,#f7f3ec,#efe3d1)}
.designer-card-v2 .d-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.designer-card-v2:hover .d-cover img{transform:scale(1.05)}
.designer-card-v2 .d-cover .d-badge{position:absolute;left:12px;bottom:12px;background:rgba(36,29,22,.86);color:#fff;font-size:13.5px;font-weight:700;padding:5px 10px;border-radius:999px;letter-spacing:.04em;backdrop-filter:blur(4px)}
.designer-card-v2 .d-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.designer-card-v2 .d-name{font-size:16px;font-weight:800;color:var(--ink);line-height:1.3}
.designer-card-v2 .d-role{font-size:14px;color:var(--brand-dark);font-weight:600;line-height:1.6}
.designer-card-v2 .d-meta{font-size:14px;color:var(--ink-2);line-height:1.65;margin-top:4px;font-weight:500}
.designer-card-v2 .d-skill{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:10px}
.designer-card-v2 .d-skill span{font-size:13.5px;background:var(--bg-2);color:var(--ink-2);padding:3px 9px;border-radius:999px;font-weight:600}

/* 横向紧凑版（保留旧版兼容小场景） */

/* ============ 卡片（升级质感） ============ */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(0,0,0,.04);position:relative}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.09);text-decoration:none}
.card-media{position:relative;overflow:hidden}
.card-img{aspect-ratio:16/10;object-fit:cover;width:100%;background:var(--bg-2);transition:transform .5s ease}
.card-img.wide{aspect-ratio:16/9}
.card:hover .card-img{transform:scale(1.05)}
.card-body{padding:20px 20px 22px;flex:1;display:flex;flex-direction:column;gap:10px}
.card h3{font-size:16px;line-height:1.45;font-weight:700;color:var(--ink)}
.card p{font-size:15px;color:var(--ink-2);line-height:1.7;font-weight:500}
.tag{display:inline-block;font-size:13.5px;background:var(--brand-light);color:var(--brand-dark);padding:3px 11px;border-radius:999px;margin:0 6px 2px 0;font-weight:600}
.card-link{margin-top:auto;font-size:14px;font-weight:700;color:var(--brand)}

/* ============ 图片右上角 tag 浮层（容器卡片 + 标签） ============
   用法：<div class="tag-overlay"><span class="tag">xxx</span><span class="tag">yyy</span></div>
   放在 .card-media 同级之前，position:absolute 浮在图片右上角。
   每个 tag 都是一个独立的"容器小卡片"，不是大块橙色 chip。 */
.tag-overlay{position:absolute;top:12px;right:12px;z-index:2;display:flex;flex-direction:column;gap:6px;pointer-events:none;max-width:calc(100% - 24px)}
.tag-overlay .tag{background:rgba(255,255,255,.94);color:var(--ink);border:1px solid rgba(36,29,22,.14);border-radius:6px;padding:5px 11px;font-size:13.5px;font-weight:600;margin:0;box-shadow:0 2px 8px rgba(0,0,0,.06);backdrop-filter:blur(4px);line-height:1.6}
.card-media:hover .tag-overlay{opacity:.95}

/* 设计师紧凑卡 */
.designer-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;align-items:center;gap:12px;transition:transform .2s ease,box-shadow .2s ease}
.designer-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.07);text-decoration:none}
.designer-card .d-avatar{width:54px;height:54px;border-radius:50%;object-fit:cover;background:var(--bg-2);border:1px solid var(--line);flex-shrink:0}
.designer-card .d-name{font-size:15px;font-weight:700;line-height:1.6;color:var(--ink)}
.designer-card .d-role{font-size:14px;color:var(--ink-2);line-height:1.65;margin-top:2px;font-weight:500}

/* ============ 报价表格 ============ */
.price-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:15px;font-weight:500}
.price-table th,.price-table td{border:1px solid var(--line);padding:15px 17px;text-align:left}
.price-table th{background:var(--brand-light);color:var(--brand-dark);font-weight:600}
.price-table tr:nth-child(even) td{background:var(--bg-2)}
.price-note{font-size:14px;color:var(--ink-2);margin-top:14px;line-height:1.75;font-weight:500}
/* 报价表手机端：改为紧凑卡片（2026-09-14 方哥：一卡三行字占一大块太松散）
   布局：项目名 + 报价同行两端对齐，说明收成卡底一行小字；theard 藏掉 */
@media(max-width:640px){
  .price-table,.price-table tbody{display:block;width:100%}
  .price-table{overflow:visible;font-weight:500;border:0;background:transparent}
  .price-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .price-table tr{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:10px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:13px 15px 11px;background:#fff}
  .price-table td{display:block;border:none;padding:0;text-align:left}
  .price-table td:nth-child(1){grid-column:1;font-size:15.5px;font-weight:700;color:var(--ink)}
  .price-table td:nth-child(2){grid-column:2;font-size:15px;font-weight:700;color:var(--brand-dark);text-align:right;white-space:nowrap}
  .price-table td:nth-child(3){grid-column:1 / -1;font-size:13.5px;font-weight:500;color:var(--ink-2);border-top:1px dashed var(--line);margin-top:9px;padding-top:8px;line-height:1.6}
  .price-table td::before{display:none}
  .price-table tr:nth-child(even) td{background:transparent}
  /* 文档/工序型表格（工艺对照、施工工序，无价格数字）：手机端改单列堆叠
     —— 原 2 列规则里 td2 是长说明且 nowrap，会把 td1（项目名）挤到 16px 竖排逐字断行 */
  .price-table.tbl-doc tr{grid-template-columns:1fr;row-gap:0}
  .price-table.tbl-doc td:nth-child(1){grid-column:1;font-size:15.5px;font-weight:700;color:var(--ink);white-space:nowrap}
  .price-table.tbl-doc td:nth-child(2){grid-column:1;text-align:left;white-space:normal;font-size:14px;font-weight:500;color:var(--ink-2);line-height:1.7;margin-top:7px}
  .price-table.tbl-doc td:nth-child(3){grid-column:1;font-size:13.5px;font-weight:500;color:var(--ink-2);border-top:1px dashed var(--line);margin-top:9px;padding-top:8px;line-height:1.6}
}

/* ============ FAQ ============ */
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
.faq-item summary{padding:17px 19px;cursor:pointer;font-weight:600;list-style:none;font-size:15px;line-height:1.6}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item[open] summary{border-bottom:1px solid var(--line);color:var(--brand-dark)}
.faq-item p{padding:0 19px 19px;color:var(--ink-2);font-size:15px;line-height:1.75;font-weight:500}

/* ============ 详情页 ============ */
.detail-hero{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:24px}
.detail-hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
/* ============ 360 全景入口（图上方居中：淡入提示约 1 秒后自动淡出，hover 可重现，整图可点跳全景） ============ */
.pano-link{display:block;position:relative;overflow:hidden;cursor:pointer}
.pano-cap{position:absolute;left:50%;top:clamp(14px,2vw,26px);transform:translateX(-50%);z-index:2;display:inline-flex;align-items:center;gap:clamp(7px,.9vw,11px);padding:clamp(8px,1vw,12px) clamp(14px,1.8vw,22px);background:rgba(0,0,0,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#fff;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.18);opacity:0}
.pano-cap.is-hint{animation:panoHint 2.4s ease}
.pano-link:hover .pano-cap{opacity:1 !important}
.pano-icon{flex:0 0 auto;width:clamp(20px,2.4vw,28px);height:clamp(20px,2.4vw,28px);opacity:1;animation:panoSpin 9s linear infinite}
.pano-text{flex:0 0 auto;font-size:clamp(16px,2vw,22px);font-weight:600;letter-spacing:.02em;white-space:nowrap}
@keyframes panoHint{0%{opacity:0}12%{opacity:1}55%{opacity:1}100%{opacity:0}}
@keyframes panoSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.pano-icon{animation:none}.pano-cap,.pano-cap.is-hint{animation:none;opacity:1}}
.detail-meta{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.meta-box{background:var(--bg-2);border-radius:12px;padding:12px 16px;flex:1;min-width:120px}
.meta-box .k{font-size:14px;color:var(--ink-2)}
.meta-box .v{font-size:16px;font-weight:700}
.prose{max-width:860px}
.prose h2{font-size:20px;margin:28px 0 12px;line-height:1.3}
.prose p{margin-bottom:var(--space-para);color:#3a3a37;line-height:1.75}
.related{margin-top:40px}

/* ============ 图文分栏（设计师详情 / 关于页，破网格单调） ============ */
.profile-split{display:grid;gap:24px;grid-template-columns:1fr;align-items:stretch}
.profile-split .ps-media{border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-2);min-height:260px}
.profile-split .ps-media img{width:100%;height:100%;object-fit:cover}
.profile-split .ps-body{display:flex;flex-direction:column;gap:10px;justify-content:center}
.profile-split .ps-name{font-size:26px;font-weight:800;line-height:1.2;color:var(--ink)}
.profile-split .ps-role{font-size:15px;color:var(--brand-dark);font-weight:700}
.profile-split .ps-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--ink-2);margin:2px 0}
.profile-split .ps-meta b{color:var(--ink);font-weight:700}
.profile-split .ps-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.profile-split .ps-tags span{font-size:13.5px;background:var(--brand-light);color:var(--brand-dark);padding:4px 11px;border-radius:999px;font-weight:600}
@media(min-width:768px){.profile-split{grid-template-columns:320px 1fr;gap:40px}}
@media(min-width:1024px){.profile-split{grid-template-columns:360px 1fr;gap:52px}}

/* ============ 工艺卡片网格（图上文下，PC 3列 / 平板 2列 / 手机 1列，紧凑不空） ============ */
.feature-list{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
.feature-row{display:flex;flex-direction:column;background:#2e261d;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);overflow:hidden;transition:transform .2s,box-shadow .2s}
.feature-row:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.32)}
.feature-row .fr-media{position:relative;border-radius:0;aspect-ratio:16/10;min-height:0;overflow:hidden;background:var(--bg-2)}
.feature-row .fr-media img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.feature-row .fr-body{padding:22px 22px 24px}
.feature-row .fr-body .fr-tag{display:inline-block;font-size:13.5px;background:var(--brand);color:#fff;padding:3px 11px;border-radius:999px;font-weight:600;margin-bottom:12px}
.feature-row .fr-body h3{font-size:19px;margin-bottom:10px;line-height:1.35;color:#fff}
.feature-row .fr-body p{font-size:15px;color:rgba(255,255,255,.84);line-height:1.7;font-weight:500}
.feature-row .fr-body ul{margin:10px 0 0;padding-left:18px;color:rgba(255,255,255,.84);font-size:15px;line-height:1.7;font-weight:500}
.feature-row .fr-body li{margin-bottom:5px}
.feature-row .fr-body .card-link{display:inline-block;margin-top:14px;color:var(--brand-light);font-weight:600}
/* 平板 2 列 */
@media(min-width:768px){.feature-list{grid-template-columns:repeat(2,1fr);gap:20px}}
/* PC 3 列 */
@media(min-width:1024px){.feature-list{grid-template-columns:repeat(4,1fr);gap:26px}}

/* ============ 表单 ============ */
.form-wrap{max-width:680px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.field input,.field textarea,.field select,select.field,input.field,textarea.field{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:16px;background:#fff;color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brand)}
.field textarea{min-height:90px;resize:vertical}
.hint{font-size:14px;color:var(--ink-2);margin-top:4px;line-height:1.6;font-weight:500}

/* 深底 CTA 内的轻量预约表单 */
.lead-form{display:flex;gap:10px;justify-content:center;max-width:560px;margin:0 auto;flex-wrap:wrap}
.lead-form input{flex:1;min-width:150px;padding:13px 16px;border-radius:9px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:#fff;font-size:16px;font-family:inherit}
.lead-form input::placeholder{color:rgba(255,255,255,.62)}
.lead-form .btn{flex-shrink:0}
@media(max-width:560px){.lead-form{flex-direction:column}.lead-form input{width:100%}}

/* ============ 生成器预览 ============ */
.gen-preview{margin-top:24px;background:#1e1e1e;color:#d4d4d4;border-radius:var(--radius);padding:16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;white-space:pre-wrap;max-height:340px;overflow:auto}
.copy-ok{color:var(--brand-dark);font-weight:700;font-size:14px;margin-left:10px}

/* ============ 页脚 ============ */
.site-footer{background:#1f1410;color:#fff;padding:80px 0 0;margin-top:0}
/* 首页「为什么选云城装饰」板块：给「关于我们」留一个手机端也可见的正文入口
   （手机端导航折叠 + 页脚精简后，about 页会失去其他可见入口） */
.why-about{text-align:center;margin:-4px 0 22px;font-size:14.5px;font-weight:500}
.why-about a{color:var(--brand-dark);text-decoration:none;border-bottom:1px solid rgba(200,100,43,.35);padding-bottom:2px}
.why-about a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.site-footer a{color:#fff;opacity:.85;transition:opacity .2s,color .2s}
.site-footer a:hover{opacity:1;color:var(--brand-light)}
.footer-grid{display:grid;gap:48px;grid-template-columns:1fr}
.ft-brand .ft-logo{font-size:24px;font-weight:700;letter-spacing:-.01em;margin-bottom:12px}
.ft-brand .ft-logo b{color:var(--brand)}
.ft-intro{font-size:14px;line-height:1.75;opacity:.72;max-width:300px;font-weight:500}
.ft-qr{display:flex;gap:14px;align-items:center;margin-top:24px}
.qr-box{width:84px;height:84px;border:1px solid rgba(255,255,255,.18);border-radius:10px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13.5px;opacity:.85;background:rgba(255,255,255,.04)}
.qr-tip{font-size:13.5px;line-height:1.6;opacity:.72}
.ft-contact h4{font-size:14px;font-weight:700;margin-bottom:18px;opacity:.95;letter-spacing:.04em}
.nap{font-size:14px;line-height:1.6;opacity:.78;font-weight:500}
.nap>div{padding:7px 0;display:flex;gap:10px}
.nap>div span{display:inline-block;width:36px;color:rgba(255,255,255,.68);font-size:14px;flex-shrink:0}
.promise-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.promise-list li{font-size:14px;opacity:.82;line-height:1.6;display:flex;gap:10px;align-items:flex-start}
.promise-list .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);flex-shrink:0;margin-top:7px}
.copyright{border-top:1px solid rgba(255,255,255,.1);margin-top:64px}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding:22px 20px;font-size:13.5px;opacity:.68}

@media(min-width:768px){
  .footer-grid{grid-template-columns:1.4fr 1fr;gap:56px}
  .site-footer{padding:96px 0 0;margin-top:0}
}
@media(min-width:1024px){
  .footer-grid{grid-template-columns:1.5fr 1fr;gap:72px}
  .site-footer{padding:120px 0 0;margin-top:0}
}

/* ============ 为什么选我们：浅底白卡 + 橙图标抓眼球（与深棕页脚强对比，避免两块深色挨着） ============ */
.section.why{background:#fff;color:var(--ink);padding:clamp(40px,5.5vw,60px) 0}
.section.why .section-title,.section.why .section-sub{color:var(--ink)}
.section.why .section-sub{opacity:1;color:var(--ink-2)}
.section.why .eyebrow{color:var(--brand)}
.section.why .why-divider{height:1px;background:var(--line);border:none;margin:22px 0 18px}
.section.why .lead-form{margin-top:4px}
.section.why .lead-form input{background:#fff;color:var(--ink);border:1px solid var(--line)}
.section.why .lead-form input::placeholder{color:var(--ink-3)}
.promise-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
.promise-card{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:18px 18px;display:flex;gap:14px;align-items:center;transition:transform .22s ease,box-shadow .22s ease;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.promise-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(0,0,0,.09)}
.promise-card .pc-ico{width:44px;height:44px;border-radius:12px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex-shrink:0;box-shadow:0 6px 16px rgba(200,100,43,.4)}
.promise-card h3{color:var(--ink);font-size:16px;font-weight:800;margin-bottom:5px;line-height:1.35}
.promise-card p{font-size:14.5px;color:var(--ink-2);line-height:1.6;font-weight:500}
@media(min-width:768px){.promise-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(min-width:1024px){.promise-grid{grid-template-columns:repeat(4,1fr);gap:18px}}

/* ============ 手机端兜底：所有 2/3/4 列卡片网格统一回退 1 列 ============
   放在所有网格规则之后，确保级联覆盖生效。
   解决"2 列布局在 320-430px 宽下，每列 130-150px 装不下中文段落导致溢出/挤压"；
   平板及以上保持各阶梯（服务区 3 列、案例 4 列、文章 3 列、why 4 列、设计师 4 列）。 */
@media(max-width:640px){
  .grid,
  .promise-grid,
  .grid-cases,
  .grid-articles{grid-template-columns:1fr;gap:14px}
}
/* 设计师小卡手机端 2 列（2026-09-14 方哥：一排一个太大；头像+名字卡 2 列装得下） */
@media(max-width:640px){
  .grid-designers{grid-template-columns:repeat(2,1fr);gap:10px}
  .designer-card{padding:11px 10px;gap:9px;align-items:flex-start}
  .designer-card .d-avatar{width:42px;height:42px}
  .designer-card .d-name{font-size:14.5px;display:block;line-height:1.4}
  .designer-card .d-name .d-role{display:inline-block;margin:5px 0 0;padding:2px 6px;font-size:13.5px;position:static;top:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .designer-card .d-role-meta{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;line-height:1.55;margin-top:6px;text-wrap:initial}
}
@media(max-width:359px){
  .grid-designers{grid-template-columns:1fr}
}
/* 工艺卡手机端 2 列紧凑：避免一排一个太大 */
@media(max-width:640px){
  .feature-list{grid-template-columns:repeat(2,1fr);gap:12px}
  .feature-row .fr-body{padding:13px 12px 14px}
  .feature-row .fr-body .fr-tag{font-size:13.5px;margin-bottom:8px;padding:2px 8px}
  .feature-row .fr-body h3{font-size:15px;margin-bottom:6px}
  .feature-row .fr-body p{font-size:15px;line-height:1.65;font-weight:500}
  .feature-row .fr-body ul{font-size:15px;padding-left:13px;margin-top:5px;font-weight:500}
  .feature-row .fr-body li{margin-bottom:2px}
}
@media(max-width:359px){
  .feature-list{grid-template-columns:1fr;gap:14px}
  .feature-row .fr-body{padding:15px 15px 17px}
  .feature-row .fr-body h3{font-size:17px;margin-bottom:8px}
  .feature-row .fr-body p{font-size:15px;line-height:1.6;font-weight:500}
  .feature-row .fr-body ul{font-size:15px;padding-left:18px;margin-top:7px;font-weight:500}
}

/* ============ 案例筛选 chips ============ */
.filters{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:8px}
.filters .f-label{font-size:14px;font-weight:700;color:var(--ink-2);align-self:center;margin-right:2px}
.filters .f-row{display:flex;flex-wrap:wrap;gap:8px}
/* 手机端：chip 横向滑动 + 隐藏滚动条（项目类型 5 个 + 装修风格 4 个，每组一行即可，避免折行难看） */
@media(max-width:640px){
  .filters .f-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .filters .f-row::-webkit-scrollbar{display:none}
  .filters .f-row .chip{white-space:nowrap;flex-shrink:0}
  .filters .f-row .f-label{flex-shrink:0;margin-right:6px}
}
.chip{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink-2);font-family:inherit;font-size:14px;font-weight:600;padding:7px 15px;border-radius:999px;cursor:pointer;transition:all .18s ease}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip.active{background:var(--brand);border-color:var(--brand);color:#fff}
.chip.active:hover{background:var(--brand-dark);color:#fff}
.mb-filter{margin-bottom:26px}

/* ============ 工具类 ============ */
.center{text-align:center}

/* ============ 右侧竖排悬浮条（2026-09-12 按朗润线上实测值 1:1 抄：
   胶囊 74×50、贴屏幕右边缘 right:0、只圆左侧 25px、图标 30px、文字 12/12、间距 20px、悬停整条变品牌色
   电话：手机 tel: 直拨；PC/平板点开弹号码卡（一键复制），避免桌面端弹「选取应用」
   预约到店：点开向左展开「自驾前往 / 专车接送」，分别弹定位卡与专车预约表单 */
.side-cta{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:140;display:flex;flex-direction:column;align-items:flex-end}
.sc-list{display:flex;flex-direction:column;align-items:flex-end}
.sc-list>*{margin-bottom:20px}
.sc-list>*:last-child{margin-bottom:0}
.sc-more-toggle,.sc-pop-toggle,.sc-wx-toggle,.sc-book-toggle,.sc-panel-toggle{position:absolute;opacity:0;pointer-events:none;left:-9999px;width:0;height:0;margin:0}
.sc-more-btn{display:none}
.sc-more-btn .sc-ico-close{display:none}
.sc-more-mask{display:none}
/* 胶囊本体：宽 88 = 左内边距 11 + 图标 27 + 图文间距 11 + 文字区 39（两行字 25 + 右留白 14）；高 54 = 上下各 11 + 内容 32
   🔴 图标与文字之间必须留够间距（旧版只有 1px，图文"粘"在一起被方哥点名）；文字行高必须大于字号（旧版 12/12 零行距，两行叠着） */
.sc-item,.sc-wx-btn{position:relative;display:flex;align-items:center;width:88px;min-height:54px;padding:11px 0 11px 11px;background:#fff;color:#3e3a39;border-radius:27px 0 0 27px;box-shadow:0 4px 8px rgba(34,34,34,.18);text-decoration:none;border:none;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:background .18s ease,color .18s ease}
.sc-item svg,.sc-wx-btn svg{width:27px;height:27px;flex:0 0 27px;margin-right:11px}
.sc-txt{display:flex;flex-direction:column;justify-content:center;font-size:13.5px;line-height:16px;font-weight:500;letter-spacing:.02em;white-space:nowrap;text-align:left}
.sc-txt i{font-style:normal;font-weight:500}
/* 图标色浅一档：照朗润层次（图标 #7A6D6D / 文字 #3E3A39），让文字当主角、图标退后半步
   描边型靠 color(currentColor)，实心型（预约到店定位针）靠 fill，两条都要跟着走；变品牌底时统一转白 */
.sc-item svg,.sc-wx-btn svg,.sc-mini svg{color:#7a6d6d}
.sc-item svg:not([fill]),.sc-wx-btn svg:not([fill]),.sc-mini svg:not([fill]){fill:#7a6d6d}
.sc-tel svg,.sc-item:hover svg,.sc-wx-btn:hover svg,.sc-wx-toggle:checked ~ .sc-wx-btn svg,.sc-book-toggle:checked ~ .sc-book-row .sc-book-main svg{color:#fff}
.sc-tel svg:not([fill]),.sc-item:hover svg:not([fill]),.sc-wx-btn:hover svg:not([fill]),.sc-wx-toggle:checked ~ .sc-wx-btn svg:not([fill]),.sc-book-toggle:checked ~ .sc-book-row .sc-book-main svg:not([fill]){fill:#fff}
.sc-mini:hover svg{color:var(--brand)}
.sc-mini:hover svg:not([fill]){fill:var(--brand)}
/* 悬停：整条变品牌色（朗润做法，不做位移） */
.sc-item:hover,.sc-wx-btn:hover{background:var(--brand);color:#fff;text-decoration:none}
/* 第一项常显品牌色 */
.sc-tel{background:var(--brand);color:#fff}
.sc-tel:hover{background:var(--brand-dark)}
/* 电话项：手机直拨 / PC-平板点开复制，两者互斥显示 */
.sc-tel-wrap{position:relative;display:flex}
.sc-tel-call{display:flex}
.sc-tel-copy{display:none}
.sc-tel-pop{display:none}
/* 红点提示（朗润 kefu_msg 的位置：衬在图标右上角，缓慢呼吸） */
.sc-tel::after{content:"";position:absolute;left:29px;top:4px;width:9px;height:9px;border-radius:50%;background:#e8342a;box-shadow:0 0 0 2px #fff;animation:scMsg 2s ease-in-out infinite;pointer-events:none}
@keyframes scMsg{0%,100%{opacity:1}50%{opacity:.18}}
.sc-pop-lab{display:block;font-size:13.5px;font-weight:700;letter-spacing:.1em;color:var(--ink-3)}
.sc-tel-num{display:block;font-size:23px;font-weight:800;letter-spacing:.02em;color:var(--brand);line-height:1.2;margin-top:8px}
.sc-copy-btn{display:block;width:100%;margin-top:12px;padding:11px 14px;border-radius:11px;border:1px solid var(--brand);background:#fff;color:var(--brand);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .18s ease}
.sc-copy-btn:hover{background:var(--brand);color:#fff}
.sc-copy-btn.done{background:#07c160;border-color:#07c160;color:#fff}
.sc-pop-tip{display:block;margin-top:11px;padding-top:10px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2);line-height:1.6;font-weight:500}
/* 微信项 + 二维码弹层（弹层底部带一键复制微信号） */
.sc-wx{position:relative;display:flex}
.sc-wx-pop{display:none}
.sc-wx-mask{display:none}
.sc-wx-pop img{width:140px;height:140px;margin:0 auto 9px;display:block;border-radius:8px}
.sc-wx-pop b{display:block;font-size:14px;color:var(--ink);letter-spacing:.02em}
.sc-wx-pop span{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-top:7px;font-weight:500}
.sc-wx-pop .sc-copy-btn{margin-top:10px;padding:9px 12px;font-size:13.5px;border-radius:10px}
/* 预约到店：展开后「自驾前往 | 专车接送」白底子项，整体拼成一条（左端圆角、右端贴边） */
.sc-book{position:relative;display:flex}
.sc-book-row{display:flex;align-items:center}
.sc-book-extra{display:none;align-items:center;height:54px;background:#fff;border-radius:27px 0 0 27px;box-shadow:0 4px 8px rgba(34,34,34,.18)}
.sc-book-toggle:checked ~ .sc-book-row .sc-book-extra{display:flex}
.sc-book-toggle:checked ~ .sc-book-row .sc-book-main{border-radius:0;background:var(--brand);color:#fff}
.sc-mini{width:88px;min-height:54px;justify-content:flex-start;padding:11px 0 11px 11px;background:none;box-shadow:none;border-radius:0;color:#3e3a39}
.sc-mini svg{width:27px;height:27px;flex:0 0 27px;margin-right:11px}
.sc-mini:hover{background:none;color:var(--brand)}
.sc-sep{display:block;width:1px;height:22px;background:#a8a8a8;flex:0 0 auto}
.sc-caret{display:none}
/* PC / 平板：电话弹号码卡、微信弹二维码（都在胶囊左侧） */
@media(min-width:768px){
  .sc-tel-call{display:none}
  .sc-tel-copy{display:flex}
  .sc-tel-wrap:has(.sc-pop-toggle:checked) .sc-tel-pop{display:block;position:absolute;top:50%;right:calc(100% + 12px);transform:translateY(-50%);z-index:135;width:228px;padding:18px 18px 16px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(20,16,14,.22);text-align:left}
  .sc-wx:hover .sc-wx-pop,.sc-wx:focus-within .sc-wx-pop,.sc-wx-toggle:checked ~ .sc-wx-pop{display:block;position:absolute;top:50%;right:calc(100% + 12px);transform:translateY(-50%);z-index:130;width:212px;padding:18px 16px 16px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(20,16,14,.2);text-align:center}
  /* 🔴 弹层与胶囊之间有 12px 空隙，鼠标横移会中途脱离 :hover 导致弹层消失、里面的「复制微信号」点不到——用隐形过渡区接住 */
  .sc-wx-pop::after{content:"";position:absolute;top:0;bottom:0;right:-14px;width:14px}
  .sc-wx:hover .sc-wx-btn,.sc-wx:focus-within .sc-wx-btn{background:var(--brand);color:#fff}
  /* 鼠标移到弹层上时 label 已不 hover，但整条仍是橙底——图标也得跟着白，否则一橙一灰不协调 */
  .sc-wx:hover .sc-wx-btn svg,.sc-wx:focus-within .sc-wx-btn svg{color:#fff}
  .sc-wx:hover .sc-wx-btn svg:not([fill]),.sc-wx:focus-within .sc-wx-btn svg:not([fill]){fill:#fff}
}
/* 手机：收起式——右下圆钮点开浮出四入口（72px 常显会压住正文，实测盖住 hero 文字，故收起） */
@media(max-width:767px){
  .side-cta{right:12px;top:auto;bottom:74px;transform:none}
  .sc-list{position:fixed;right:0;bottom:142px;z-index:130;display:none}
  .sc-more-toggle:checked ~ .sc-list{display:flex}
  .sc-more-btn{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:999px;background:var(--brand);color:#fff;box-shadow:0 8px 22px rgba(200,100,43,.45);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .18s ease;touch-action:none;user-select:none;-webkit-user-select:none}
  .sc-more-btn:active{transform:scale(.94)}
  .sc-more-btn svg{width:25px;height:25px}
  .sc-more-toggle:checked ~ .sc-more-btn{background:#3a3330}
  .sc-more-toggle:checked ~ .sc-more-btn .sc-ico-open{display:none}
  .sc-more-toggle:checked ~ .sc-more-btn .sc-ico-close{display:block}
  body:has(.sc-more-toggle:checked) .sc-more-mask{display:block;position:fixed;inset:65px 0 0 0;z-index:130;background:rgba(20,16,14,.45)}
  .sc-wx-toggle:checked ~ .sc-wx-btn{background:var(--brand);color:#fff}
  .sc-wx-toggle:checked ~ .sc-wx-pop{display:block;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:171;width:min(262px,80vw);padding:20px 16px 16px;background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(20,16,14,.3);text-align:center}
  .sc-wx-pop img{width:132px;height:132px}
  body:has(.sc-wx-toggle:checked) .sc-wx-mask{display:block;position:fixed;inset:65px 0 0 0;z-index:130;background:rgba(20,16,14,.45)}
}
/* ============ 弹层：自驾前往（门店定位） / 专车接送（预约表单） ============ */
.sc-modal{position:fixed;inset:0;z-index:170;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(20,16,14,.55)}
.sc-modal:has(.sc-panel-toggle:checked){display:flex}
.sc-modal-close{position:absolute;inset:0;cursor:default}
.sc-modal-card{position:relative;z-index:2;width:min(560px,100%);max-height:86vh;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;border-radius:20px;box-shadow:0 30px 70px rgba(20,16,14,.42)}
.sc-modal-x{position:absolute;top:12px;right:12px;z-index:5;width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.14);color:var(--ink)}
.sc-modal-x svg{width:16px;height:16px}
.sc-m-head{padding:22px 24px 14px}
.sc-m-head h3{font-size:19px;letter-spacing:.01em}
.sc-m-head p{font-size:14px;color:var(--ink-2);margin-top:5px;line-height:1.6}
/* 自驾：示意地图 + 门店卡片 */
.sc-map{position:relative;margin:0 24px;height:232px;border-radius:16px;overflow:hidden;background:#f2efe9}
.sc-map-svg{position:absolute;inset:0;width:100%;height:100%;display:block;color:var(--brand)}
/* 地图示意路名：SVG 用户坐标系字号（未设 font-size 时默认 9px，PC 实测仅 9.6px 偏小） */
.sc-map-svg text{font-size:14px;font-family:var(--font)}
.sc-map-card{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(255,255,255,.96);border-radius:12px;padding:11px 13px;box-shadow:0 6px 18px rgba(20,16,14,.16)}
.sc-map-card b{display:block;font-size:13.5px;color:var(--ink)}
.sc-map-card span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:3px;line-height:1.6;font-weight:500}
.sc-m-acts{display:flex;gap:10px;padding:16px 24px 0}
.sc-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:13px 14px;border-radius:11px;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;border:1px solid transparent;transition:all .18s ease;text-align:center}
.sc-btn svg{width:17px;height:17px}
.sc-btn-main{background:var(--brand);color:#fff;box-shadow:0 8px 20px rgba(200,100,43,.28)}
.sc-btn-main:hover{background:var(--brand-dark);color:#fff}
.sc-btn-line{background:#fff;border-color:var(--line);color:var(--ink)}
.sc-btn-line:hover{border-color:var(--brand);color:var(--brand)}
.sc-btn-line.done{background:#07c160;border-color:#07c160;color:#fff}
.sc-m-tip{margin:13px 24px 22px;font-size:13.5px;color:var(--ink-3);line-height:1.6;font-weight:500}
/* 专车：hero + 表单 */
.sc-car-hero{position:relative;padding:26px 24px 22px;border-radius:20px 20px 0 0;background:linear-gradient(135deg,#2c2420 0%,#4d3b30 60%,#6b4c36 100%);color:#fff;overflow:hidden}
.sc-car-hero h3{font-size:22px;letter-spacing:.14em}
.sc-car-hero p{font-size:13.5px;opacity:.85;margin-top:8px;letter-spacing:.02em}
.sc-car-hero svg{position:absolute;right:-16px;bottom:-22px;width:148px;height:148px;opacity:.1;color:#fff}
.sc-car-form{display:flex;flex-wrap:wrap;gap:10px;padding:20px 24px 0}
.sc-field{display:flex;align-items:center;gap:8px;flex:1 1 190px;min-width:0;background:#fff;border:1px solid var(--line);border-radius:11px;padding:0 12px;height:46px}
.sc-field>span{font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.sc-field select,.sc-field input{flex:1;min-width:0;height:100%;border:none;background:transparent;outline:none;font-family:inherit;font-size:16px;color:var(--ink);appearance:none;-webkit-appearance:none}
.sc-field select{cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right center/14px no-repeat;padding-right:20px}
.sc-submit{flex:1 1 100%;margin-top:2px}
.sc-form-msg{margin:12px 24px 0;font-size:13.5px;color:#d24c3c;line-height:1.6}
.sc-car-ok{display:none;margin:16px 24px 0;padding:16px;background:var(--brand-light);border:1px solid var(--line);border-radius:14px;text-align:center}
.sc-car-ok.show{display:block}
.sc-car-ok b{display:block;font-size:14px;color:var(--ink)}
.sc-car-ok p{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-top:6px;font-weight:500}
.sc-car-ok img{width:118px;height:118px;margin:12px auto 8px;display:block;border-radius:8px;background:#fff}
.sc-car-ok .sc-ok-num{display:block;font-size:13.5px;font-weight:700;color:var(--brand)}
.sc-car-ok .sc-btn{width:100%;margin-top:12px}
.sc-sub{padding:20px 24px 0}
.sc-sub h4{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:10px}
.sc-rules ol{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:6px}
.sc-rules li{font-size:13.5px;color:var(--ink-2);line-height:1.62;font-weight:500}
.sc-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 24px 24px}
.sc-step{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:12px 6px;text-align:center}
.sc-step svg{width:20px;height:20px;color:var(--brand);margin-bottom:6px}
.sc-step b{display:block;font-size:13.5px;color:var(--ink);font-weight:600;line-height:1.6}
.sc-step i{display:block;font-style:normal;font-size:13.5px;color:var(--ink-3);margin-top:4px;letter-spacing:.1em}
.sc-step:not(:last-child)::after{content:"";position:absolute;top:50%;right:-6px;width:5px;height:5px;border-top:1.6px solid var(--ink-3);border-right:1.6px solid var(--ink-3);transform:translateY(-50%) rotate(45deg);opacity:.6}
@media(max-width:767px){
  /* 手机：遮罩与卡片都从顶部导航条下方开始，导航不被压住、视觉一致 */
  .sc-modal{inset:65px 0 0 0;padding:10px}
  .sc-modal-card{border-radius:16px;max-height:100%}
  .sc-m-head{padding:20px 18px 12px}
  .sc-map{margin:0 18px;height:204px}
  .sc-m-acts{padding:14px 18px 0;flex-direction:column}
  .sc-m-tip{margin:12px 18px 20px;font-weight:500}
  .sc-car-hero{padding:22px 18px 20px}
  .sc-car-hero h3{font-size:19px}
  .sc-car-form{padding:16px 18px 0}
  .sc-form-msg{margin:10px 18px 0}
  .sc-car-ok{margin:14px 18px 0}
  .sc-sub{padding:18px 18px 0}
  .sc-flow{grid-template-columns:repeat(2,1fr);gap:8px;padding:0 18px 20px}
  .sc-step:not(:last-child)::after{display:none}
}

.mt-s{margin-top:18px}
.mb-s{margin-bottom:16px}
.flex-gap{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ====================================================
   后台 admin 样式
   ==================================================== */
.admin-lock{position:fixed;inset:0;background:var(--ink);display:flex;align-items:center;justify-content:center;z-index:999;color:#fff}
.admin-lock .box{background:#fff;color:var(--ink);border-radius:var(--radius-lg);padding:36px;width:340px;max-width:90vw;text-align:center}
.admin-lock h2{font-size:20px;margin-bottom:8px}
.admin-lock p{font-size:14px;color:var(--ink-2);margin-bottom:18px;line-height:1.6}
.admin-lock input{padding:12px 14px;border:1px solid var(--line);border-radius:10px;width:100%;font-size:16px;margin-bottom:14px}
.admin-shell{display:none}
.admin-shell.show{display:block}
.admin-top{background:var(--ink);color:#fff;padding:0 20px;height:60px;display:flex;align-items:center;justify-content:space-between}
.admin-top .logo{color:#fff}
.admin-top .logo b{color:var(--brand)}
.admin-top .who{font-size:14px;opacity:.8}
.admin-body{display:flex;min-height:calc(100vh - 60px)}
.admin-side{width:200px;background:var(--bg-2);border-right:1px solid var(--line);padding:18px 12px;flex-shrink:0}
.admin-side button{display:block;width:100%;text-align:left;background:none;border:none;padding:11px 14px;border-radius:10px;font-size:14px;color:var(--ink);cursor:pointer;font-family:inherit;margin-bottom:4px}
.admin-side button:hover{background:#fff}
.admin-side button.active{background:var(--brand);color:#fff;font-weight:600}
.admin-main{flex:1;padding:28px;max-width:880px}
.admin-panel{display:none}
.admin-panel.active{display:block}
.admin-panel h2{font-size:20px;margin-bottom:6px}
.admin-panel .panel-sub{font-size:14px;color:var(--ink-2);margin-bottom:20px;line-height:1.6}
.admin-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:22px}
.kpi-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-bottom:24px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.kpi .v{font-size:26px;font-weight:800;color:var(--brand)}
.kpi .k{font-size:14px;color:var(--ink-2);margin-top:4px;font-weight:500}
.kpi .d{font-size:14px;color:var(--ink-2);margin-top:6px;line-height:1.6;font-weight:500}
.search-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.search-row a{flex:1;min-width:140px;text-align:center;font-size:14px}
.note-box{background:var(--brand-light);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:14px;color:var(--ink-2);line-height:1.7;margin-top:14px}
@media(max-width:768px){
  .admin-body{flex-direction:column}
  .admin-side{width:100%;display:flex;gap:6px;overflow-x:auto;padding:10px}
  .admin-side button{margin-bottom:0;white-space:nowrap}
}

/* ============ 案例详情：头图全宽通栏（edge-to-edge） + 缩略图回栅格 ============ */
/* 头图：铺满屏宽，56vw≈16:9 原始比例几乎不裁切；超宽屏限高 720px 防图过高 */
.cover-bleed{width:100%;overflow:hidden;background:#14110d;line-height:0}
.cover-bleed img{width:100%;height:min(56.25vw,720px);object-fit:cover;object-position:center;display:block}
/* 头图后的正文区：收紧顶部间距，让缩略图紧贴头图下方 */
.section.cover-gap{padding-top:26px}
@media(min-width:768px){.section.cover-gap{padding-top:30px}}
@media(min-width:1280px){.section.cover-gap{padding-top:34px}}

/* 缩略图与正文对齐（保留栅格留白） */
.gallery-under .gallery-thumbs{display:flex;gap:10px;margin-top:4px;overflow-x:auto;padding-bottom:4px}
.gallery-under .gallery-thumbs .thumb{width:92px;height:62px;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid transparent;flex:0 0 auto;transition:border-color .15s}
.gallery-under .gallery-thumbs .thumb.is-active{border-color:var(--brand)}
.gallery-under .gallery-tip{margin:10px 0 0;font-size:14px;color:var(--ink-3);font-weight:500}

/* ============ 工艺页：图文详述 → 对照表 分隔标题 ============ */
.craft-split{margin:clamp(30px,5vw,46px) 0 clamp(16px,3vw,24px)}

/* ============ 移动端主从轮播 Deck（≤640px，方哥方案 A+ 落地） ============
   1 主大图（顶部半透明信息带）+ 2 小卡（小区/标题一行），每组 3 案例一屏，
   左右 scroll-snap 滑动；PC/平板 ≥641px 不受影响，继续用原网格。 */
.deck{display:none}
@media(max-width:640px){
  .deck{display:block;margin:2px -2px 6px}
  .deck-viewport{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0 8px}
  .deck-viewport::-webkit-scrollbar{display:none}
  .deck-slide{flex:0 0 88%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;gap:10px;min-width:0}
  /* flow 模式（≤3 个平级内容，如"我们的服务"）：每屏一张主大图，图更高、说明可两行 */
  .deck[data-mode="flow"] .deck-slide{flex-basis:100%}
  .deck[data-mode="flow"] .deck-main img{aspect-ratio:4/3}
  .deck[data-mode="flow"] .deck-main .dm-cap{padding:18px 18px 26px}
  .deck[data-mode="flow"] .deck-main .dm-t{font-size:19px}
  .deck[data-mode="flow"] .deck-main .dm-s{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;font-size:13.5px;line-height:1.6;margin-top:8px}
  /* 主卡 */
  .deck-main{position:relative;display:block;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06);background:#fff;border:1px solid var(--line)}
  .deck-main img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--bg-2)}
  .deck-main .dm-cap{position:absolute;left:0;right:0;top:0;padding:14px 15px 22px;background:linear-gradient(180deg,rgba(20,17,13,.72),rgba(20,17,13,.34) 55%,rgba(20,17,13,0) 100%);color:#fff;pointer-events:none}
    .deck-main .dm-badge{position:absolute;right:12px;bottom:12px;z-index:2;background:rgba(255,255,255,.92);color:var(--brand-dark);font-size:13.5px;font-weight:700;padding:4px 10px;border-radius:99px;letter-spacing:.02em;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.deck-main .dm-t{font-size:16.5px;font-weight:800;line-height:1.4;letter-spacing:.01em;text-shadow:0 1px 5px rgba(0,0,0,.35);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .deck-main .dm-s{font-size:13.5px;margin-top:6px;color:rgba(255,255,255,.95);font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* 小卡 */
  .deck-subs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .deck-sub{display:flex;flex-direction:column;gap:6px;min-width:0}
  .deck-sub .ds-img{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff}
  .deck-sub img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--bg-2)}
  .deck-sub .ds-t{font-size:13.5px;color:var(--ink-2);font-weight:600;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
  .deck-sub .ds-arr{font-size:13.5px;color:var(--brand);font-weight:700}
  /* 分页点 */
  .deck-dots{display:flex;justify-content:center;gap:5px;margin:2px 0 0}
  .deck-dot{width:6px;height:6px;border-radius:99px;background:var(--line);border:0;padding:0;transition:all .25s ease;flex:0 0 auto}
  .deck-dot.on{width:18px;background:var(--brand)}
}

/* ============ 首页设计师 1+2+2（方哥定版 2026-09-05） ============
   主卡（左/上 大图人像）+ 4 小卡 2×2。手机端先看 1 主 + 2 小，再滑看到另 2 小。*/
.team-feat{display:grid;gap:14px;grid-template-columns:1fr;align-items:start}
.team-feat .tf-main{display:flex;flex-direction:column}
.team-feat .tf-main .d-cover{position:relative;aspect-ratio:4/3;overflow:hidden}
.team-feat .tf-main .d-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.team-feat .tf-main .d-body{flex:0 0 auto;padding:16px 18px 18px}
.tf-minis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-content:start}
.tf-mini{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .22s ease,box-shadow .22s ease;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.tf-mini:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.09);text-decoration:none}
.tf-mini .d-cover{position:relative;aspect-ratio:1/1;overflow:hidden}
.tf-mini .d-cover img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .45s ease;display:block}
.tf-mini:hover .d-cover img{transform:scale(1.04)}
.tf-mini .d-name{padding:9px 10px 0;font-size:14px;font-weight:800;color:var(--ink);line-height:1.6}
.tf-mini .d-role{padding:2px 10px 11px;font-size:13.5px;color:var(--brand-dark);font-weight:600;line-height:1.6}
/* 平板+桌面 ≥768：主卡左大、minis 2×2 右（主卡图拉伸与右侧两行等高）。
   分三段：768-1023 自适应铺满 / 1024-1279 主卡加宽 460 铺满 / ≥1280 主卡 560 铺满
   （2026-09-05 修：去掉 minis 260px cap + justify-center，右列铺满，消除右侧大空白） */
@media(min-width:768px){
  .team-feat{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:18px;align-items:stretch}
  .team-feat .tf-main .d-cover{flex:1 1 auto;aspect-ratio:auto;min-height:380px}
  .tf-minis{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
@media(min-width:1024px) and (max-width:1279px){
  .team-feat{grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:22px}
  .team-feat .tf-main .d-cover{min-height:0}
}
/* 桌面大屏 ≥1280：主卡加宽到 560，右侧 2×2 铺满剩余列宽 */
@media(min-width:1280px){
  .team-feat{grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:26px;align-items:stretch}
  .team-feat .tf-main .d-cover{flex:1 1 auto;aspect-ratio:auto;min-height:0}
  .tf-minis{justify-content:normal;gap:16px}
}

/* ============ 工人/施工团队板块（方哥定版 2026-09-05 试点） ============
   列表 grid：手机 2 列（与设计师方案 A 一致），桌面 3 列。卡片复用 v2 大卡变体（cover + body）。 */
.grid-workers{display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.grid-workers{grid-template-columns:repeat(3,1fr);gap:22px}}
@media(min-width:1280px){.grid-workers{grid-template-columns:repeat(3,1fr)}}

.worker-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(0,0,0,.04);position:relative}
.worker-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.09);text-decoration:none}
.worker-card .w-cover{position:relative;aspect-ratio:1/1;overflow:hidden;background:#f0ece4}
.worker-card .w-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.worker-card:hover .w-cover img{transform:scale(1.04)}
.worker-card .w-cover .w-badge{position:absolute;left:10px;bottom:10px;background:rgba(36,29,22,.84);color:#fff;font-size:13.5px;font-weight:700;padding:5px 10px;border-radius:999px;letter-spacing:.02em;backdrop-filter:blur(4px)}
.worker-card .w-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.worker-card .w-name{font-size:16px;font-weight:800;color:var(--ink);line-height:1.3}
.worker-card .w-role{font-size:14px;color:var(--brand-dark);font-weight:600;line-height:1.6}
.worker-card .w-meta{font-size:14px;color:var(--ink-2);line-height:1.65;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:500}
.worker-card .w-skill{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:10px}
.worker-card .w-skill span{font-size:13.5px;background:var(--bg-2);color:var(--ink-2);padding:3px 9px;border-radius:999px;font-weight:600}
/* 工人详情页 ps-media 占位 svg 用 object-fit:contain 让 svg 居中不裁 */
.profile-split .ps-media img[src$=".svg"]{object-fit:contain;background:#f7f3ec}

/* 工艺承诺列表（师傅详情页） */
.craft-promises{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:768px){.craft-promises{grid-template-columns:1fr 1fr}}
.craft-promises li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;box-shadow:0 2px 10px rgba(0,0,0,.03)}
.craft-promises li strong{font-size:15px;font-weight:800;color:var(--brand-dark);line-height:1.6}
.craft-promises li span{font-size:14px;color:var(--ink-2);line-height:1.7;font-weight:500}

/* ============ 在建工地 / 装修记录板块（2026-09-11 方哥拍板开工） ============
   列表页 = 工地卡（封面 + 状态角标 + 11 段进度条）；详情页 = 竖向时间线（节点 + 日期 + 图片组）。
   节点模型见 REQ-2026-09-07-new-features.md：默认 11 节点，可删减、可调序，双角色模板。 */

/* ---- 列表页：工地卡网格 ---- */
.grid-sites{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:768px){.grid-sites{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}
@media(min-width:1024px){.grid-sites{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* 首页固定 3 张工地卡 → 平板起直接 3 列，避免 2 列时"2+1"缺角（列表页不受影响，保留 2 列通用） */
@media(min-width:768px){.grid-sites-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

.site-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(0,0,0,.04);position:relative}
.site-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.09);text-decoration:none}
.site-card .s-cover{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
.site-card .s-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.site-card:hover .s-cover img{transform:scale(1.04)}
/* 状态角标：施工中=品牌橙 + 呼吸点；已交付=深炭 */
.site-card .s-badge{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;padding:5px 11px;border-radius:999px;color:#fff;background:rgba(36,29,22,.82);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);letter-spacing:.02em;line-height:1.6}
.site-card .s-badge.live{background:rgba(200,100,43,.94)}
.site-card .s-badge i{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#fff;display:block}
.site-card .s-badge.live i{animation:sDot 1.8s ease-in-out infinite}
@keyframes sDot{0%,100%{opacity:1}50%{opacity:.35}}
.site-card .s-body{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column;gap:9px}
.site-card h3{font-size:16px;line-height:1.45;font-weight:700;color:var(--ink)}
.site-card .s-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;color:var(--ink-2);font-weight:500}
.site-card .s-meta span{display:inline-flex;align-items:center;gap:5px}
.site-card .s-meta em{font-style:normal;color:var(--ink-3)}
/* 11 段进度条：已完成实橙 / 当前橙+呼吸 / 未到浅线 */
.site-card .s-steps{display:flex;gap:3px;margin-top:2px}
.site-card .s-steps i{flex:1 1 0;height:6px;border-radius:3px;background:var(--line);display:block}
.site-card .s-steps i.done{background:var(--brand)}
.site-card .s-steps i.cur{background:var(--brand);animation:stepPulse 1.8s ease-in-out infinite}
@keyframes stepPulse{0%,100%{opacity:1}50%{opacity:.4}}
.site-card .s-prog-txt{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--ink-2)}
.site-card .s-prog-txt b{color:var(--brand-dark);font-weight:800}
.site-card .card-link{padding-top:6px}
@media(prefers-reduced-motion:reduce){
  .site-card .s-badge.live i,.site-card .s-steps i.cur{animation:none}
}

/* ---- 详情页：工地信息卡 ---- */
.site-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:28px}
@media(min-width:768px){.site-info{grid-template-columns:repeat(4,minmax(0,1fr));padding:22px 24px;gap:16px 22px}}
.site-info div{display:flex;flex-direction:column;gap:3px;min-width:0}
.site-info span{font-size:14px;color:var(--ink-3);letter-spacing:.02em;font-weight:500}
.site-info b{font-size:15px;font-weight:700;color:var(--ink);line-height:1.6;overflow-wrap:anywhere}

/* ---- 详情页：竖向时间线 ---- */
.timeline{list-style:none;margin:0;padding:0 0 0 30px;position:relative}
.timeline::before{content:"";position:absolute;left:7px;top:12px;bottom:12px;width:2px;background:var(--line);border-radius:2px;z-index:0}
.tl-item{position:relative;padding-bottom:34px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-30px;top:4px;z-index:1;width:16px;height:16px;border-radius:50%;background:#fff;border:2.5px solid var(--line);box-sizing:border-box}
.tl-item.done .tl-dot{background:var(--brand);border-color:var(--brand)}
.tl-item.cur .tl-dot{background:var(--brand);border-color:var(--brand);animation:tlPulse 2.2s ease-in-out infinite}
@keyframes tlPulse{0%,100%{box-shadow:0 0 0 0 rgba(200,100,43,.42)}50%{box-shadow:0 0 0 9px rgba(200,100,43,0)}}
.tl-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.tl-name{font-size:17px;font-weight:800;color:var(--ink);line-height:1.35;letter-spacing:-.01em}
.tl-date{font-size:14px;font-weight:700;color:var(--brand-dark);background:var(--brand-light);padding:3px 11px;border-radius:999px;line-height:1.6}
.tl-tag{font-size:13.5px;font-weight:700;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);padding:3px 10px;border-radius:999px;line-height:1.6}
.tl-item.cur .tl-tag{background:var(--brand);border-color:var(--brand);color:#fff}
.tl-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:13px}
@media(min-width:768px){.tl-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}
.tl-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:var(--bg-2);border:1px solid var(--line-soft);display:block;transition:transform .35s ease}
.tl-gallery a{display:block;border-radius:10px;overflow:hidden}
.tl-gallery a:hover img{transform:scale(1.03)}
.tl-note{font-size:14.5px;color:var(--ink-2);line-height:1.72;margin-top:11px;max-width:760px;font-weight:500}
/* 待施工节点：灰显，起"流程提醒"作用 */
.tl-item.pending .tl-name{color:var(--ink-3);font-weight:700}
.tl-item.pending .tl-note{color:var(--ink-3)}
.tl-item.pending .tl-tag{color:var(--ink-3);background:#fff}
.tl-item.pending .tl-dot{border-color:var(--line);background:#fff}
@media(prefers-reduced-motion:reduce){.tl-item.cur .tl-dot{animation:none}}

/* ============ 2026-09-11 晚间改版 ============ */
/* 平板（768-1023）：加大两侧留白，模仿 PC 的"贯通色带 + 居中内容"节奏，告别通栏一块死 */
@media(min-width:768px) and (max-width:1023px){
  .container{padding:0 44px}
}
/* 师傅/设计师卡：职位并入名字行（灰字区分，不再另起一行） */
/* 职位跟在名字后：浅橙小胶囊标签（方哥 2026-09-12：行内灰字太挤太糊，改成胶囊更精致醒目） */
.worker-card .w-name .w-role,
.designer-card-v2 .d-name .w-role,
.designer-card-v2 .d-name .d-role,
.tf-mini .d-name .d-role,
.designer-card .d-name .d-role{margin-left:8px;font-size:13.5px;font-weight:600;color:var(--brand-dark);background:#f7ede2;border-radius:999px;padding:2.5px 9px;white-space:nowrap;position:relative;top:-1px}
.designer-card .d-role-meta{font-size:14px;color:var(--ink-2);line-height:1.6;margin-top:2px;font-weight:500}
/* 联系页微信二维码卡（导航微信图标跳转锚点） */
#wechat{scroll-margin-top:84px}
.wx-qr-card{display:flex;gap:22px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.wx-qr-card .qr-box--light{border:1px solid var(--line);background:var(--bg-warm);color:var(--ink-2);opacity:1;flex:0 0 auto}
.wx-qr-card h3{font-size:17px;font-weight:800;color:var(--ink)}
.wx-qr-card p{font-size:15px;color:var(--ink-2);margin-top:8px;line-height:1.7;font-weight:500}
@media(max-width:640px){.wx-qr-card{flex-direction:column;text-align:center;padding:24px 18px}.wx-qr-card p{font-size:14px;font-weight:500}}

/* ============ 2026-09-12 借鉴朗润：电话 + 微信做成「入口」而非页面内容 ============
   二维码是随时弹出的工具，不在页面里占一块地；微信号文字留在 DOM 里给 AI 搜索抓 */
.wx-pop img{width:140px;height:140px;margin:0 auto 8px;display:block;border-radius:6px}
.wx-pop b{display:block;font-size:13.5px;color:var(--ink);letter-spacing:.02em}
.wx-pop-tip{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-top:7px;font-weight:500}
.wx-copy{width:100%;margin-top:10px;padding:9px 0;font-size:13.5px;font-family:inherit;border:1px solid var(--line);border-radius:9px;background:#faf7f4;color:var(--ink);cursor:pointer}
.wx-copy:hover{background:#f2ece5}
.wx-copy .wx-ok{display:none}
.wx-copy.ok{background:#07c160;border-color:#07c160;color:#fff}
.wx-copy.ok .wx-ok{display:inline;margin-left:4px}
/* PC / 平板：鼠标移上去弹白卡（细线小卡，不要大绿块） */
@media(min-width:768px){
  .nav-wx:hover .wx-pop,.nav-wx:focus-within .wx-pop{display:block;position:absolute;top:42px;right:-6px;z-index:120;width:196px;padding:14px 12px 12px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(20,16,14,.13);text-align:center}
  .nav-wx:hover .wx-pop::before{content:"";position:absolute;top:-6px;right:18px;width:11px;height:11px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
  .nav-tel .tel-num{display:inline}
}
/* 平板窄档（768–1023）：电话只留图标，宽度让给导航间距（2026-09-14 方哥钦点仿朗润）
   🔴 必须放在上面 ≥768 块之后：同特异性靠后者胜，放前面会被 .tel-num{display:inline} 盖回 */
@media(min-width:768px) and (max-width:1023px){
  .nav-tel .tel-num{display:none}
  .nav-tel{padding:0;width:32px;justify-content:center}
}
/* 手机：点小图标弹居中卡片 + 半透明遮罩（checkbox 纯 CSS，零 JS） */
@media(max-width:767px){
  /* 遮罩挂在 body 末尾（不在 header 内）：header 的 backdrop-filter 会让内部 fixed 失效，
     而且 100vw 的遮罩放在 header 里会把 header 撑出 284px 横向滚动 */
  .wx-mask{position:fixed;inset:0;background:rgba(20,16,14,.45);z-index:118}
  /* 遮罩已移到 body 末尾（不是 checkbox 的兄弟），所以用 :has() 跨层级控制显隐 */
  .wx-toggle:checked ~ .wx-mask,body:has(.wx-toggle:checked) .wx-mask{display:block}
  .wx-toggle:checked ~ .wx-pop{display:block;position:absolute;top:42px;right:-4px;z-index:119;width:min(300px,84vw);padding:20px 16px 16px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px rgba(20,16,14,.18);text-align:center}
  .wx-toggle:checked ~ .wx-pop .wx-pop-tip{margin-top:9px}
}
/* ============ 关于页重排（2026-09-12 借鉴朗润信任板块） ============ */
.about-values{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.av-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px}
.av-card h3{font-size:15px;margin:0 0 8px;color:var(--ink)}
.av-card p{font-size:14px;color:var(--ink-2);line-height:1.7;margin:0;font-weight:500}
/* 服务网点卡（about，2026-09-14 方哥：一行字太单薄） */
.net-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
@media(min-width:1024px){.net-grid{grid-template-columns:repeat(4,1fr)}}
.net-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.net-card b{display:block;font-size:15px;color:var(--ink);line-height:1.5}
.net-card span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:3px;line-height:1.6;font-weight:500}
.net-note{font-size:14px;color:var(--ink-2);margin-top:12px;line-height:1.7;font-weight:500}
.about-team{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.at-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;text-decoration:none;transition:border-color .2s ease,transform .2s ease}
.at-card:hover{border-color:var(--brand);transform:translateY(-2px);text-decoration:none}
.at-thumb{width:72px;height:72px;border-radius:12px;object-fit:cover;flex:0 0 auto}
.at-txt{display:flex;flex-direction:column;gap:5px;min-width:0}
.at-txt b{font-size:15px;color:var(--ink);line-height:1.6}
.at-txt>span{font-size:14px;color:var(--ink-2);line-height:1.6;font-weight:500}
.qr-box--img{opacity:1;background:#fff;padding:4px;object-fit:contain}
@media(max-width:767px){
  .about-values{grid-template-columns:1fr}
  .about-team{grid-template-columns:1fr}
}


/* ============ 2026-09-12 第三轮反馈修复 ============ */
/* 服务 4 卡一行（平板 2x2），避免 3+1 孤行 */
.grid-4{grid-template-columns:repeat(2,1fr)}
@media(min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr)}}
/* 联系页：右栏预约流程卡 */
.flow-card{flex:1;min-width:280px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.flow-card h3{font-size:17px;font-weight:800;color:var(--ink);margin:0 0 6px}
.flow-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;counter-reset:flow}
.flow-list li{position:relative;padding-left:44px;counter-increment:flow}
.flow-list li::before{content:counter(flow);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:999px;background:var(--brand-light);color:var(--brand-dark);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.flow-list b{display:block;font-size:15px;color:var(--ink);line-height:1.6}
.flow-list span{display:block;font-size:14px;color:var(--ink-2);line-height:1.65;margin-top:3px;font-weight:500}
.flow-note{margin:18px 0 0;padding-top:14px;border-top:1px dashed var(--line);font-size:14px;color:var(--ink-2);font-weight:500}
/* 预约右卡直接触达区（2026-09-14 方哥：右卡太空，补电话/时间/地址/微信） */
.flow-direct{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.flow-call{width:100%;justify-content:center;text-align:center}
.flow-info{margin:16px 0 0;display:flex;flex-direction:column;gap:12px}
.flow-info>div{display:flex;gap:10px;align-items:flex-start}
.flow-info dt{flex:0 0 auto;font-size:13.5px;font-weight:700;color:var(--brand-dark);background:var(--brand-light);padding:2px 9px;border-radius:6px;line-height:1.6;white-space:nowrap}
.flow-info dd{margin:0;font-size:14px;color:var(--ink-2);line-height:1.65;font-weight:500}
@media(max-width:767px){
  .flow-info dt{padding:1px 7px}
  .flow-info>div{gap:8px}
}
/* banner 图可点击：hover 轻微放大 + 提示 */
a.banner-media{display:block;text-decoration:none}
a.banner-media img{transition:transform .5s ease}
a.banner-media:hover img{transform:scale(1.03)}
/* 首页设计师小卡：名字行底部留白（原先紧贴底边） */
.tf-mini .d-name{padding:10px 12px 12px}

/* ============ hero 稀缺文案 / footer 快速导航（2026-09-12 补回：误随热装小区样式清理删除） ============ */
.hero-note{margin:16px 0 0;font-size:14px;color:rgba(255,255,255,.72);letter-spacing:.02em}
.hero-note b{color:#fff;font-weight:600}
.ft-nav h4{font-size:13.5px;color:rgba(255,255,255,.72);margin:0 0 14px;font-weight:500;letter-spacing:.06em}
.ft-nav a{display:inline-block;margin:0 14px 10px 0;font-size:14px;color:rgba(255,255,255,.82);text-decoration:none}
.ft-nav a:hover{color:var(--brand)}
@media(min-width:768px){
  .footer-grid{grid-template-columns:1.6fr 1fr 1.2fr}
}

/* ============ 联系页「我们提供的服务」4 卡（2026-09-12 按朗润卡片骨架重做）
   骨架 = 顶部图标 + 居中标题 + 一句话定位 + 圆点清单（橙=含 / 灰=不含）+ 底部「适合」锚块
   信息全部来自原 4 条文案与装修合作模式通识，不新增未确证内容；清单是真实 HTML 文字（GEO 友好） ============ */
.svc-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.svc-grid{gap:16px}}
@media(min-width:1024px){.svc-grid{grid-template-columns:repeat(4,1fr);gap:20px}}
.svc-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #ece3d8;border-radius:18px;padding:30px 20px 22px;text-align:center;box-shadow:0 1px 2px rgba(20,16,14,.04),0 10px 24px rgba(20,16,14,.06);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;overflow:hidden}
/* 顶部品牌色条常显：四张卡"立"起来有节奏（旧版 hover 才显，白卡浮在米色底上糊成一片） */
.svc-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--brand),#e8ab7c);opacity:.9;transition:opacity .25s ease,height .25s ease}
/* 只在真有指针悬停的设备上做抬升，避免触屏点一下卡住 */
@media(hover:hover){
  .svc-card:hover{transform:translateY(-5px);border-color:#e5d3c0;box-shadow:0 2px 4px rgba(20,16,14,.05),0 22px 44px rgba(20,16,14,.13)}
  .svc-card:hover::before{opacity:1;height:5px}
}
.svc-ico{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:0 auto 16px;border-radius:20px;background:linear-gradient(150deg,#fdf3ea,#f7e4d2);color:var(--brand-dark);box-shadow:inset 0 0 0 1px #f2ddc9}
.svc-ico svg{width:30px;height:30px;stroke-width:2}
.svc-card h3{margin:0;font-size:21px;font-weight:700;letter-spacing:.01em;color:#23211d}
/* 标题下一段橙色短线：四张卡扫读起手位一致 */
.svc-card h3::after{content:"";display:block;width:26px;height:3px;margin:10px auto 0;border-radius:2px;background:var(--brand);opacity:.85}
.svc-lead{margin:11px 0 0;font-size:14px;line-height:1.6;color:#4a4740;letter-spacing:.02em;font-weight:500}
/* 「适合」块：整块浅橙"便利贴"→ 左橙竖条 + 极浅底，标签独占一行，四卡高度统一 */
.svc-fit{margin:18px 0 0;padding:11px 13px 12px;border-radius:0 10px 10px 0;background:#fdf8f2;border-left:3px solid var(--brand);font-size:14px;line-height:1.6;color:#4a4740;text-align:left;min-height:86px;font-weight:500}
.svc-fit b{display:block;font-size:13.5px;font-weight:700;letter-spacing:.12em;color:var(--brand-dark);margin:0 0 3px}
/* 手机 4 卡 2×2（对齐工艺卡铁律：一排一个太浪费）；≤359 回退 1 列 */
@media(max-width:639px){
  .svc-grid{gap:10px}
  .svc-card{padding:20px 12px 15px;border-radius:14px}
  .svc-card::before{height:3px}
  .svc-ico{width:46px;height:46px;margin:0 auto 10px;border-radius:14px}
  .svc-ico svg{width:23px;height:23px}
  .svc-card h3{font-size:17px}
  .svc-card h3::after{width:20px;height:2.5px;margin:7px auto 0}
  .svc-lead{font-size:14px;line-height:1.6;margin-top:8px;font-weight:500}
  .svc-fit{margin-top:13px;padding:8px 10px 9px;font-size:13.5px;line-height:1.6;min-height:71px;border-left-width:2.5px;font-weight:500}
  .svc-fit b{font-size:13.5px;letter-spacing:.08em;margin-bottom:2px}
}
@media(max-width:359px){
  .svc-grid{grid-template-columns:1fr}
  .svc-card{padding:20px 16px 16px}
}


/* ===== 透明浮层 header 收尾（2026-09-13 方哥要求：叠在 banner 上、白字白图标）===== */
/* 锚点跳转时不要被 fixed header 盖住 */
html{scroll-padding-top:76px}
/* 平板/PC：「更多」纯文字按钮（2026-09-13 方哥：杠和胶囊都去掉，只留两个字）
   收纳：干货 / 报价 / 关于我们 / 联系 */
@media(min-width:768px){
  .menu-btn{width:auto;height:auto;padding:0;border-radius:0;background:none;border:0;
    font-size:14px;font-weight:500;color:rgba(255,255,255,.9);letter-spacing:.02em}
  .menu-btn::after{content:"更多"}
  .menu-btn:hover,.nav-toggle:checked ~ .menu-btn{background:none;color:#f0a06a}
  /* 当前栏目在「更多」里时（干货/报价/关于/联系及其详情页）：更多二字下白线呼应 */
  .menu-btn.active{border-bottom:2px solid #fff;padding-bottom:2px}
}
/* 手机：汉堡回到 42×42 纯图标态（抽屉里不放「更多」二字）
   🔴 方哥 2026-09-13：三条杠下面不要胶囊容器 —— 去掉底色和圆角，只留白色三条杠 */
@media(max-width:767px){
  .menu-btn{width:42px;height:42px;padding:0;border-radius:0;
    background-color:transparent;
    background-position:center;background-size:24px;border:0}
  .menu-btn:hover,.nav-toggle:checked ~ .menu-btn{background-color:transparent}
  .menu-btn::after{content:none}
}


/* 【2026-09-13 导航改版】报价 / 关于我们 已从 nav-quick 移入「更多」下拉（全端常驻），
   旧的「平板藏关于/PC 显关于」三套条件规则随之作废删除，HTML 里 nav-about-item 类已不存在 */


/* ===== 中文断行治理（2026-09-13）：干掉「末行只剩 1~2 个字」的难看换行 =====
   balance：标题类，让多行字数均匀分配
   pretty ：正文类，避免最后一行孤零零拖一两个字 */
h1,h2,h3,h4,.section-title,.card-title,.tb-title,.hero h1,.page-hero h1,
.pc-ico,.svc-lead,.pano-cap,.stat-num,.num,
.d-meta,.w-meta,.pc-list li,.case-meta,td,b,
.section-sub,.page-hero p,.pkg-fit,.net-card span,.fr-body li{text-wrap:balance}
/* 窄列表头至少容纳两个字一行，避免 4 个字竖排成一柱 */
th{min-width:78px}
/* 正文里的中文短链整段不拆行（"云城装饰施工 / 工艺"这种断法看着像 bug） */
.prose p a,.container p a{white-space:nowrap}
p,li,dd,.lead,.crumb,.ft-intro,.hero-note,.why-about,
.case-meta,.d-role-meta,.tel-num,address{text-wrap:pretty}

/* ===== ① Header 滚动态（2026-09-13）：顶部半透明 → 上滑后不透明 =====
   朗润式体验：首屏 hero 上浮着半透明导航（LOGO/图标可见即可），
   一旦用户开始上滑，立刻切成不透明实色，避免"半透不透"的糊感。
   类名 body.is-scrolled 由 header-scroll.js 挂上（滚动 >10px 加，回顶 <6px 摘）。 */
.site-header{transition:background-color .34s ease,box-shadow .34s ease,
  border-color .34s ease,backdrop-filter .34s ease,-webkit-backdrop-filter .34s ease}
body.is-scrolled .site-header{
  background:#1c140f;                      /* 实色不透明，与品牌深色一致 */
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 10px 28px rgba(0,0,0,.22)}
@media(prefers-reduced-motion:reduce){.site-header{transition:none}}

/* ===== ② 合作方式 4 卡（2026-09-13 重排；手机一排 2 个 = 方哥钦点）=====
   原版问题：卡内嵌了一段带内联样式的灰底价格块，底色/品牌色/边框三种视觉
   同时在抢，显得"碎"。重排原则：一张卡只用一处品牌色（价格数字），
   其余全部走墨色 + 灰度，靠留白与分隔线分层，四卡等宽等高。
   🔴 手机端必须一排 2 个（一排一个太浪费、方哥已明确骂过两次，别再写回 1 列）。 */
.pkg-grid{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
.pkg-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:17px 15px 14px;text-decoration:none;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.pkg-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.08);
  border-color:#e0d3c0;text-decoration:none}
.pkg-name{margin:0;font-size:16.5px;font-weight:700;color:var(--ink);letter-spacing:.01em}
.pkg-desc{margin:8px 0 0;font-size:13.5px;line-height:1.65;color:var(--ink-2);font-weight:500}
.pkg-rows{margin:12px 0 0;padding:11px 0 0;border-top:1px solid var(--line-soft)}
.pkg-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 4px;
  font-size:13.5px;font-weight:600;color:var(--ink-3);line-height:1.4}
.pkg-price b{font-size:21px;font-weight:800;color:var(--brand);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pkg-fit{margin:7px 0 0;font-size:13.5px;line-height:1.62;color:var(--ink-3);font-weight:500}
.pkg-link{margin-top:auto;padding-top:12px;font-size:13.5px;font-weight:700;color:var(--brand)}
@media(min-width:640px){
  .pkg-grid{gap:16px}
  .pkg-card{padding:22px 20px 18px}
  .pkg-name{font-size:17.5px}
  .pkg-desc{font-size:14.5px}
  .pkg-price b{font-size:24px}}
/* 手机（<640）：价格一律「数字一行 + 单位一行」——区间价 1200–2000 在窄卡里会折行，
   不统一的话第一排卡比第二排矮 20px，四张卡看着参差（实测 375 卡高 296/316） */
@media(max-width:639px){
  .pkg-price{flex-direction:column;gap:0}
  .pkg-price b{font-size:22px}}
/* 320 级小屏：22px 的「1200–2000」会折成两行 → 压到 19px 保持单行（四卡才齐） */
@media(max-width:359px){.pkg-price b{font-size:19px}}
@media(min-width:1024px){
  .pkg-grid{grid-template-columns:repeat(4,1fr);gap:20px}
  .pkg-card{padding:26px 24px 22px}
  .pkg-name{font-size:18px}
  .pkg-desc{font-size:15px}
  .pkg-price b{font-size:26px}}