/* 大洋艺术 · 设计系统 v4（2026-10-21）
   依据：首页 v3 效果图 + Taste Skill / Impeccable 检查规则。最后加载，覆盖 styles.css 和 interact.css 的旧外观。
   一个底色（石白）、一个墨色、一个强调色（中国红，只用在首屏强调词和主要按钮）；夜色用于首屏、强调段和页脚。
   两种字体：思源宋体（标题、数字）+ 系统黑体（正文）。不用小号大写标签、01/02 编号、细线框、渐变、发光。 */
:root{
  --paper:#f2f1ef; --paper2:#e8e7e4; --white:#fbfbfa;
  --ink:#121212; --ink2:#3d3b37; --dim:#5f5c56; --line:#dcdad5; --line2:#e8e7e4;
  --night:#0b0b0d; --night2:#141417; --night-line:#2a2a2e; --night-text:#eeeeec; --night-dim:#b2b0ab;
  --lamp:#c4161c; --lamp-d:#9e1015; --lamp-soft:#f3c9c6; --gold:#d8b878;
  --moss:#2f4a2c; --moss-d:#223820;
  --sans:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
  --poster:"Noto Serif SC","Source Han Serif SC","Songti SC",serif;
  --num:var(--poster); --label:var(--sans); --mono:var(--sans);
  --gut:clamp(20px,3.9vw,56px); --max:1328px;
  --ease:cubic-bezier(.16,1,.3,1);
}
body{background:var(--paper);color:var(--ink);font:18px/1.8 var(--sans)}
::selection{background:var(--lamp);color:#fff}
:focus-visible{outline:3px solid var(--lamp);outline-offset:3px}
h1,h2,h3{font-family:var(--poster);font-weight:900;letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}

/* ---------- 顶栏：夜色，标志 + 五个链接 + 电话 ---------- */
.top{background:var(--night);border-bottom:0;backdrop-filter:none;color:var(--night-text)}
.top .wrap{min-height:76px;gap:clamp(20px,2.8vw,40px);max-width:none;padding-inline:var(--gut)}
.top .logo img{filter:brightness(0) invert(1);height:44px;width:auto}   /* 10-25 放大到看得清（原 34px）*/
.top .nav{gap:clamp(12px,1.5vw,28px);align-self:stretch;align-items:stretch}
.top .nav .nv-a{color:var(--night-dim);border:0;font-size:clamp(15px,1.2vw,16px);padding:6px 0;align-self:center}
.top .nav .nv-a:hover,.top .nav .nv-a[aria-current="page"],.nv.is-open>.nv-a{color:#fff;font-weight:400}
.top .nav .nv-a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--lamp)}
/* 带面板的三项：文字 + 小箭头按钮；面板贴着顶栏下沿，夜色连成一片（11-02） */
.nv{display:flex;align-items:center;gap:2px}
.nv-tg{width:22px;height:32px;display:grid;place-items:center;background:none;border:0;color:var(--night-dim);cursor:pointer;padding:0}
.nv-tg::before{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg)}
.nv-tg[aria-expanded="true"]::before{transform:translateY(1px) rotate(-135deg)}
.nv-tg:hover,.nv-tg[aria-expanded="true"]{color:#fff}
.nv-panel{position:absolute;left:0;right:0;top:100%;z-index:50;background:var(--night);border-top:1px solid var(--night-line);border-bottom:1px solid var(--night-line);color:var(--night-text)}
#nv-dino{max-height:calc(100vh - var(--top-h,76px));max-height:calc(100dvh - var(--top-h,76px));overflow-y:auto;overscroll-behavior:contain}
html:not(.js-nv) .nv:hover>.nv-panel,html:not(.js-nv) .nv:focus-within>.nv-panel{display:block}
.nv-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 300px;gap:48px;padding:32px var(--gut) 28px;max-width:1440px;margin:0 auto}
.nv-col.nv-wide{grid-column:span 2}
.nv-col h3{font-family:var(--sans);font-size:15px;font-weight:400;color:var(--night-dim);letter-spacing:0;margin-bottom:10px}
.nv-col a{display:block;color:var(--night-text);font-size:16px;padding:9px 0;border-bottom:1px solid var(--night-line)}
.nv-col a small{display:block;color:var(--night-dim);font-size:15px;margin-top:2px}
.nv-col a:hover{color:#fff}
.nv-g2{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
.nv-now{display:inline-block;margin-left:8px;padding:0 6px;font-size:12px;line-height:20px;color:#fff;border:1px solid var(--night-dim);vertical-align:2px}
.nv-pic img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.nv-pic p{color:var(--night-dim);font-size:15px;line-height:1.7;margin:12px 0 10px}
.top .nv-go{color:#fff;font-size:15px;border-bottom:1px solid currentColor;padding-bottom:2px}
.nv-foot{display:flex;flex-wrap:wrap;gap:8px 22px;padding:14px var(--gut);max-width:1440px;margin:0 auto;border-top:1px solid var(--night-line);font-size:15px;color:var(--night-dim)}
.nv-foot a{color:var(--night-text)}
.nv-foot a:hover{color:#fff}
.top .call{color:#fff;min-height:44px}
.top .call::before{display:none}
.top .call em span{display:none}
.top .call b{font-family:var(--poster);font-size:18px;letter-spacing:0}
.menu>summary{border:0;background:var(--night2);color:#fff;font-size:16px;padding:10px 16px}
/* 手机和窄窗口：整屏夜色菜单，彩灯 / 机模 / 方案可展开（11-02） */
.menu[open]>summary{font-size:0}
.menu[open]>summary::after{content:"关闭";font-size:16px}
.menu nav{position:fixed;left:0;right:0;top:var(--top-h,76px);bottom:0;z-index:60;display:block;min-width:0;overflow-y:auto;overscroll-behavior:contain;background:var(--night);border:0;border-top:1px solid var(--night-line);box-shadow:none;padding:8px var(--gut) calc(24px + env(safe-area-inset-bottom))}
.menu:not([open])>nav{display:none}
body:has(.menu[open]){overflow:hidden}
.menu nav a{color:var(--night-text);border-color:var(--night-line)}
.mm-g{border-bottom:1px solid var(--night-line)}
.mm-g summary,.menu nav .mm-a{display:flex;justify-content:space-between;align-items:center;list-style:none;cursor:pointer;color:#fff;font-size:18px;padding:16px 0;border-bottom:1px solid var(--night-line)}
.menu nav .mm-g summary{border:0;background:none;color:#fff;font-size:18px;padding:16px 0;white-space:normal}
.mm-g summary::-webkit-details-marker{display:none}
.mm-g summary::after{content:"";width:8px;height:8px;border:solid var(--night-dim);border-width:0 1.5px 1.5px 0;transform:translateY(-3px) rotate(45deg)}
.mm-g[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.mm-g div{padding:0 0 14px 14px;display:grid}
.mm-g div b{font-weight:400;font-size:15px;color:var(--night-dim);padding:10px 0 2px}
.menu nav .mm-g div a{border:0;padding:9px 0;font-size:16px}
.menu nav .mm-a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--lamp);padding-left:12px}
.mm-more{display:flex;flex-wrap:wrap;gap:6px 20px;padding:18px 0 8px;font-size:15px}
.menu nav .mm-more a{border:0;padding:4px 0;color:var(--night-dim)}
.menu nav .mm-call{display:block;margin-top:14px;padding:14px;text-align:center;background:var(--lamp);color:#fff;font-weight:700;border:0}

/* ---------- 按钮与链接：平面，一种填色，方角 ---------- */
.btn{border-radius:0;font-weight:600;min-height:48px;padding:12px 24px;transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn.yellow,.btn.lamp{background:var(--lamp);border-color:var(--lamp);color:#fff}
.btn.yellow:hover,.btn.lamp:hover{background:var(--lamp-d);border-color:var(--lamp-d)}
.more{font-size:16px;font-weight:600;border-bottom:2px solid currentColor;padding-bottom:3px}
.more::after{content:""}
.more:hover{color:var(--lamp)}

/* ---------- 标题区与段落 ---------- */
.kicker{display:none}
.crumb{font-size:15px;color:var(--dim);padding:24px var(--gut) 0}
.crumb i{color:var(--dim)}
.phead{padding:clamp(36px,5vw,72px) var(--gut) clamp(32px,4vw,56px)}
.phead h1{font-size:clamp(36px,5.2vw,72px);font-weight:900;line-height:1.08}
.phead p{color:var(--ink2);font-size:18px;max-width:34em;margin-top:20px}
.sec{border-top:0;padding:clamp(72px,9vw,140px) var(--gut)}
.sec+.sec:not(.ink):not(.panel){padding-top:clamp(24px,4vw,56px)}
.sec.panel{background:var(--paper2)}
.sec.ink{background:var(--night)}
.sec.moss{background:var(--paper2)}
.sh{margin-bottom:clamp(32px,4vw,56px)}
.sh h2{font-size:clamp(30px,3.6vw,52px);font-weight:900;line-height:1.12}
.h2sub{color:var(--ink2);font-size:17px;max-width:34em;margin-top:14px}
.sec.ink .h2sub,.sec.ink .dim{color:var(--night-dim)}
.dim{color:var(--dim)}
.lead{color:var(--ink2)}

/* ---------- 卡片：去掉白底卡片感，图片 + 文字 ---------- */
.item,.case{background:transparent}
.item .tx{padding:14px 0 0}
.item h3,.case h3{font-family:var(--poster);font-size:18px;font-weight:700}
.item p,.case p{color:var(--dim);font-size:16px;line-height:1.7}
.item:hover h3,.case:hover h3{color:var(--lamp)}
.chip,.tag{border-radius:0;background:transparent;border:1px solid var(--line);color:var(--ink2)}
.code{color:var(--dim);font-family:var(--sans);letter-spacing:.02em}

/* ---------- 资质条、行动区、页脚 ---------- */
.honor{background:var(--paper2);border-top:0;font-size:15px}
.honor .seal{background:var(--lamp);font-size:13px}
.cta{background:var(--night2);color:var(--night-text);border:0;text-align:left;padding:clamp(80px,10vw,150px) var(--gut);display:grid;grid-template-columns:minmax(0,1.1fr) auto;gap:24px 48px;align-items:end}
.cta h2{font-size:clamp(30px,3.8vw,56px);font-weight:900;color:#fff;max-width:14em;grid-row:span 2}
.cta .tel{font-family:var(--poster);font-weight:700;font-size:clamp(36px,4vw,56px);color:#fff;letter-spacing:-.01em}
.cta>span:not(.tel){color:var(--night-dim)}
.cta .btn{justify-self:start}
.foot{background:var(--night);color:var(--night-dim);border-top:0}
.foot h3{font-family:var(--sans);font-size:15px;color:#fff;font-weight:600;letter-spacing:0}
.foot a{color:var(--night-text)}
.foot .logo img{filter:brightness(0) invert(1);height:32px;width:auto}
.foot .legal{border:0;color:var(--night-dim);font-size:15px}
.foot{font-size:15px}
.foot .cols{grid-template-columns:1.4fr repeat(4,minmax(0,1fr)) 1.2fr}
@media (max-width:1100px){ .foot .cols{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:700px){ .foot .cols{grid-template-columns:1fr 1fr} }
@media (max-width:420px){ .foot .cols{grid-template-columns:1fr} }
/* 手机底栏（10-25）：在线留言全站去掉，只留一个红色的“拨打电话” */
.mbar{background:var(--night);grid-template-columns:1fr}
.mbar a{background:var(--lamp);font-weight:700}

@media (max-width:860px){
  .cta{grid-template-columns:1fr}
  .cta h2{grid-row:auto}
}
@media (max-width:1100px){ .top .nav{display:none} .menu{display:block} }
@media (orientation:portrait) and (max-width:1100px){ .top .logo img{height:34px} }
@media (max-width:700px){
  .top .wrap{gap:12px;min-height:64px}
  .top .logo img{height:34px}
  .top .call{margin-left:auto}
  .top .call b{font-size:16px}
  .menu>summary{white-space:nowrap;padding:8px 12px}
  .menu nav{top:64px;padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .menu nav .mm-call{display:none}
}
/* 超窄屏保留完整电话和 44px 菜单入口，避免顶部导航超出屏幕。 */
@media (max-width:360px){.top .wrap{gap:8px;padding-inline:12px}.top .logo img{height:28px}}
.sec.ink .stage em{color:var(--night-dim)}   /* 夜色底上的问题小字，原来对比度只有 3:1（11-02） */

/* 循环实拍视频（11-05 起公开）：叠在封面图上，开始播放后淡入 */
:has(> video.lv){position:relative}
video.lv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease;pointer-events:none}
video.lv.on{opacity:1}
.inner-page main :is(.d-show .im,.sp-dino .l-video) video.lv{object-fit:contain}