/* Self-hosted, subset to the characters this page uses, and split by script:
   a visitor reading the English version skips the Chinese outlines entirely. */
@font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/noto-sans-sc-400-latin.woff2?v=20260919v") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/noto-sans-sc-400-cjk.woff2?v=20260919v") format("woff2");unicode-range:U+2E80-303F,U+3200-9FFF,U+F900-FAFF,U+FE30-FE4F,U+FF00-FFEF}
@font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/noto-sans-sc-500-latin.woff2?v=20260919v") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Noto Sans SC";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/noto-sans-sc-500-cjk.woff2?v=20260919v") format("woff2");unicode-range:U+2E80-303F,U+3200-9FFF,U+F900-FAFF,U+FE30-FE4F,U+FF00-FFEF}
@font-face{font-family:"Noto Serif SC";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/noto-serif-sc-700-latin.woff2?v=20260919v") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Noto Serif SC";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/noto-serif-sc-700-cjk.woff2?v=20260919v") format("woff2");unicode-range:U+2E80-303F,U+3200-9FFF,U+F900-FAFF,U+FE30-FE4F,U+FF00-FFEF}

:root{
  --ink:#15222B;
  --ink-soft:#4A5A64;
  --ink-faint:#8496A0;
  --paper:#FFFFFF;
  --paper-alt:#E4E7E9;
  --slate:#343C43;
  --slate-light:#D7DBDE;
  --seal:#C4362C;
  --seal-dark:#A32B22;
  --gold:#BE9B3E;
  --wechat:#07C160;
  --wechat-dark:#059C4D;
  --line:#DFE1E3;
  --radius:4px;
  --maxw:1140px;

  /* green WeChat buttons — every size lives here, change once and both cards follow */
  --wx-btn-w:300px;        /* stacked buttons under a QR; matches .qr-link max-width */
  --wx-btn-pad:11px 14px;
  --wx-btn-fs:15px;
  --wx-nav-pad:8px 13px;   /* the green 微信 button in the header bar */
  --wx-nav-fs:14.5px;
  --wx-nav-icon:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:38px} /* fallback when JS is off; goTo() handles it otherwise */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  font-family:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--paper);
  font-size:16.5px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:"Noto Serif SC","Songti SC","SimSun",Georgia,serif;font-weight:700;line-height:1.3;letter-spacing:.01em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--seal);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.section{padding:62px 0}
.section-alt{background:var(--paper-alt)}

/* ---------- section heading ---------- */
.head{max-width:640px;margin-bottom:34px}
.head.subhead{margin-top:58px;margin-bottom:26px}
.subhead-title{font-size:clamp(21px,2.4vw,26px);margin-bottom:10px}
.head h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:14px}
/* a head with no sub-paragraph shouldn't carry the gap meant to sit above one */
.head h2:last-child,.head .subhead-title:last-child{margin-bottom:0}
.head p{color:var(--ink-soft);font-size:17px}
.rule{width:46px;height:3px;background:var(--seal);margin-bottom:22px}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:14px 30px;border-radius:var(--radius);font-weight:500;font-size:16px;border:1.5px solid transparent;cursor:pointer;transition:background .18s,color .18s,border-color .18s;font-family:inherit}
.btn-primary{background:var(--seal);color:#fff}
.btn-primary:hover{background:var(--seal-dark)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink);background:#fff}
.btn-light{background:#fff;color:var(--slate)}
.btn-light:hover{background:#D7DBDE}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
/* how far down the page you are, drawn over the header's bottom rule.
   scaleX keeps it on the compositor, so it costs nothing per scroll frame. */
.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;z-index:2;height:3px;overflow:hidden;pointer-events:none}
.scroll-progress span{display:block;width:100%;height:100%;background:var(--seal);transform:scaleX(0);transform-origin:left center;will-change:transform}
.nav{display:flex;align-items:center;gap:28px;height:76px}
.logo{display:flex;align-items:baseline;gap:0;font-family:"Noto Serif SC",serif;font-weight:700;font-size:27px;letter-spacing:.02em;white-space:nowrap;-webkit-text-stroke:.55px currentColor}
.logo .mark{font-family:"Noto Sans SC","Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:13.5px;letter-spacing:.2em;color:var(--seal);margin-left:10px;-webkit-text-stroke:0}
html[lang="zh-CN"] .logo .mark{font-family:"Noto Serif SC","Songti SC",serif;font-weight:700;font-size:27px;letter-spacing:.02em;color:var(--seal);margin-left:2px;-webkit-text-stroke:.55px currentColor}
footer .logo .mark{color:var(--seal)}
html[lang="zh-CN"] footer .logo .mark{color:var(--seal)}
.nav-drop{display:contents}
.logo{order:1}
.nav ul{display:flex;gap:26px;list-style:none;margin-left:auto;font-size:15.5px;order:2}
.nav-phone{order:3}
.nav-wx{order:5}
.nav-side{order:6}
.nav ul a{color:var(--ink-soft);padding:6px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.nav ul a:hover{color:var(--ink);border-color:var(--seal)}
.nav ul a.active{color:var(--ink);border-color:var(--seal);font-weight:500}
.nav-side{display:flex;align-items:center;gap:14px;margin-left:6px}
.lang{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:14px}
.lang button{background:#fff;border:0;padding:7px 13px;cursor:pointer;color:var(--ink-soft);font-family:inherit;font-weight:500}
.lang button[aria-pressed="true"]{background:var(--slate);color:#fff}
.nav-cta{padding:11px 20px;font-size:15px;white-space:nowrap;flex:none}
/* phone and text links act as plain text on anything that cannot dial */
a[href^="tel:"],a[href^="sms:"],.no-dial{pointer-events:none;cursor:default;text-decoration:none;user-select:text}
.no-dial,.no-dial:hover,.no-dial:focus{color:inherit}
.nav-phone.no-dial,.nav-phone.no-dial:hover{color:var(--ink)}
.nav-phone{display:inline-flex;align-items:center;gap:7px;font-size:15.5px;font-weight:500;color:var(--ink);white-space:nowrap}
.nav-phone:hover{color:var(--seal)}
.nav-phone svg{width:17px;height:17px;color:var(--seal);flex:none}
.np-short{display:none}
.lang-mini{display:none;align-items:center;justify-content:center;flex:none;white-space:nowrap;min-width:40px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:8px 9px;font-family:inherit;font-size:14px;font-weight:500;line-height:1;color:var(--ink);cursor:pointer;order:4}
.lang-mini:hover{border-color:var(--ink)}
.nav-wx{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex:none;background:var(--wechat);border:1px solid var(--wechat);border-radius:var(--radius);padding:var(--wx-nav-pad);font-family:inherit;font-size:var(--wx-nav-fs);font-weight:500;line-height:1;color:#fff;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.nav-wx:hover{background:var(--wechat-dark);border-color:var(--wechat-dark);color:#fff}
.nav-wx[aria-expanded="true"]{background:var(--wechat-dark);border-color:var(--wechat-dark);color:#fff}
.nav-wx svg{width:var(--wx-nav-icon);height:var(--wx-nav-icon);flex:none}
.wx-panel{position:absolute;top:calc(100% + 10px);right:26px;z-index:70;width:250px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 14px 30px rgba(21,34,43,.16);text-align:center}
.wx-panel[hidden]{display:none}
.wx-panel-img{width:100%;height:auto}
.wx-panel-cap{font-size:13px;color:var(--ink-soft);margin:12px 0 0;line-height:1.5}
.wx-panel-cap-top{margin:0 0 12px;font-weight:700;color:var(--seal)}
.wx-panel-btn{display:block;width:100%;max-width:var(--wx-btn-w);margin:10px auto 0;padding:var(--wx-btn-pad);font-size:var(--wx-btn-fs);line-height:1.4;text-align:center;background:var(--wechat);color:#fff}
.wx-panel-btn:hover{background:var(--wechat-dark)}
.burger{display:none;order:7;margin-left:auto;background:none;border:1px solid var(--seal);border-radius:var(--radius);padding:9px 11px;cursor:pointer;transition:background .15s}
.burger span{display:block;width:20px;height:2px;background:var(--seal);margin:4px 0;transition:background .15s}
.burger:hover{background:var(--seal)}
.burger:hover span{background:#fff}

/* ---------- hero ---------- */
.hero{padding:34px 0 66px;background:
  radial-gradient(900px 420px at 82% 12%, #E6E8EA 0%, rgba(255,255,255,0) 70%),
  linear-gradient(180deg,#FFFFFF 0%,#F4F5F6 100%)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}
.hero-grid>*{min-width:0}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--slate);font-size:14.5px;font-weight:500;margin-bottom:20px}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--gold)}
.hero h1{font-size:clamp(32px,4.6vw,52px);line-height:1.22;margin-bottom:22px}
.hero p.lede{font-size:18px;color:var(--ink-soft);max-width:34em;margin-bottom:32px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-flag{display:flex;gap:10px;align-items:flex-start;margin-top:24px;font-size:15.5px;font-weight:500;color:var(--ink)}
.hero-flag::before{content:"";flex:none;width:8px;height:8px;margin-top:8px;border-radius:50%;background:var(--seal)}
.hero-phone{font-size:15px;color:var(--ink-soft);margin-top:14px}
.hero-phone strong{font-family:"Noto Serif SC",serif;color:var(--ink);font-size:18px;letter-spacing:.02em}

/* hero intro video: 16:9, fills the right column; capped at 560px and centred once the grid stacks */
.hero-video{justify-self:center;align-self:start;width:100%;max-width:560px;border-radius:14px;overflow:hidden;background:#15222B;border:1px solid var(--line);box-shadow:0 24px 50px -26px rgba(25,29,33,.34)}
.hero-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* side by side: top of the video lines up with the top of the headline
   characters (生意的营销). Measured at 990-1280px wide in both languages: the
   headline's first glyphs start 61-64px below the top of the text column. If
   the eyebrow or the h1 size/line-height changes, re-measure this. */
@media (min-width:981px){.hero-video{margin-top:62px}}

/* ---------- hero video player (assets/js/player.js) ----------
   The same Vimeo-style controls as michaelantebi.com, on every device, with
   the site's red as the accent (centre play button, progress line, volume
   level). Without JS the browser's native controls stay and none of this
   applies. State classes on .hero-video: .xp-fresh (not played yet),
   .xp-playing, .xp-idle (controls hidden), .xp-waiting, .xp-scrubbing,
   .xp-progress-hover, .xp-vol-drag, .xp-muted, .xp-fs.
   --xp-accent recolours the player; --xp-panel is the dark control panels. */
.xp{--xp-accent:var(--seal);--xp-panel:rgba(12,12,15,.72);--xp-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;position:relative;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.xp:focus{outline:none}
.xp:focus-visible{outline:2px solid var(--xp-accent);outline-offset:3px}
.xp video{position:relative;z-index:0}
.xp button{font:inherit;border:0;margin:0;padding:0;color:#fff;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.xp svg{display:block;width:18px;height:18px;pointer-events:none}
.xp button:focus-visible,.xp .xp-prog:focus-visible{outline:2px solid var(--xp-accent);outline-offset:2px}
.xp.xp-idle{cursor:none}

/* big centre play button: whenever the video isn't playing */
.xp .xp-big{position:absolute;z-index:3;top:50%;left:50%;width:72px;height:46px;margin:-23px 0 0 -36px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--xp-accent);box-shadow:0 6px 18px -6px rgba(0,0,0,.55);transition:opacity .2s ease,transform .15s ease}
.xp .xp-big svg{width:22px;height:22px;margin-left:2px}
.xp .xp-big:active{transform:scale(.94)}
.xp.xp-playing .xp-big{opacity:0;pointer-events:none}
@media (hover:hover){
  .xp .xp-big:hover{filter:brightness(1.08)}
  .xp .xp-btn:hover svg,.xp .xp-play:hover svg{opacity:.8}
}

/* bottom control bar */
.xp .xp-bar{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:stretch;gap:6px;padding:28px 8px 8px;background:linear-gradient(to top,rgba(0,0,0,.45),transparent);transition:opacity .25s ease,transform .25s ease}
.xp.xp-idle .xp-bar{opacity:0;transform:translateY(6px);pointer-events:none}
.xp.xp-fresh .xp-bar{opacity:0;pointer-events:none}
.xp .xp-box{border-radius:6px;background:var(--xp-panel);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.xp .xp-play{flex:0 0 auto;width:40px;height:34px;display:flex;align-items:center;justify-content:center}
.xp .xp-rail{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;padding:0 6px 0 12px}
.xp .xp-btn{flex:0 0 auto;width:30px;height:34px;display:flex;align-items:center;justify-content:center}
.xp .xp-time{flex:0 0 auto;font-family:var(--xp-mono);font-size:11px;font-weight:500;color:#fff;font-variant-numeric:tabular-nums}

/* progress line: tall invisible hit area, thin visible track */
.xp .xp-prog{position:relative;flex:1 1 auto;height:34px;display:flex;align-items:center;cursor:pointer;touch-action:none;outline:none}
.xp .xp-track{position:relative;width:100%;height:4px;border-radius:2px;background:rgba(255,255,255,.22);overflow:hidden;transition:height .15s ease}
.xp .xp-buf,.xp .xp-played{position:absolute;top:0;bottom:0;left:0;width:0}
.xp .xp-buf{background:rgba(255,255,255,.35)}
.xp .xp-played{background:var(--xp-accent)}
.xp .xp-thumb{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4);transform:scale(0);transition:transform .15s ease;pointer-events:none}
.xp .xp-bubble{position:absolute;bottom:100%;left:0;margin-bottom:2px;padding:3px 6px;border-radius:4px;background:#fff;color:#111;font-family:var(--xp-mono);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .15s ease}
.xp.xp-scrubbing .xp-track{height:6px}
.xp.xp-scrubbing .xp-thumb,.xp .xp-prog:focus-visible .xp-thumb{transform:scale(1)}
.xp.xp-scrubbing .xp-bubble,.xp.xp-progress-hover .xp-bubble{opacity:1}
@media (hover:hover) and (pointer:fine){
  .xp .xp-prog:hover .xp-track{height:6px}
  .xp .xp-prog:hover .xp-thumb{transform:scale(1)}
}

/* volume: upright pop-up above the speaker (mouse only; phones use their
   own volume buttons, and the speaker still mutes) */
.xp .xp-volume{position:relative;display:flex}
.xp .xp-vol-pop{position:absolute;bottom:100%;left:50%;padding-bottom:8px;transform:translate(-50%,4px);opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease,visibility .15s}
@media (hover:hover) and (pointer:fine){
  .xp .xp-volume:hover .xp-vol-pop,.xp .xp-volume:focus-within .xp-vol-pop,.xp.xp-vol-drag .xp-vol-pop{opacity:1;visibility:visible;transform:translate(-50%,0)}
}
.xp .xp-vol-slider{width:30px;height:96px;padding:12px 0;display:flex;justify-content:center;box-sizing:border-box;border-radius:6px;background:var(--xp-panel);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;touch-action:none;outline:none}
.xp .xp-vol-track{position:relative;width:4px;height:100%;border-radius:2px;background:rgba(255,255,255,.22);overflow:hidden}
.xp .xp-vol-fill{position:absolute;left:0;right:0;bottom:0;height:100%;background:var(--xp-accent)}
.xp .xp-vol-slider:focus-visible{outline:2px solid var(--xp-accent);outline-offset:2px}

/* loading spinner */
.xp .xp-spin{position:absolute;z-index:2;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;opacity:0;pointer-events:none;animation:xp-spin .8s linear infinite;transition:opacity .2s ease}
.xp.xp-waiting .xp-spin{opacity:1}
@keyframes xp-spin{to{transform:rotate(360deg)}}

/* full screen (the whole player, so the custom controls come along) */
.xp.xp-fs{width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;background:#000}
.xp.xp-fs video{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
.xp.xp-fs .xp-bar{padding:40px max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}

/* ---------- stats ---------- */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);text-align:center}
.stat{padding:26px 16px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:"Noto Serif SC",serif;font-size:31px;color:var(--slate);line-height:1.2}
.stat span{font-size:14.5px;color:var(--ink-soft)}

/* ---------- services ---------- */
/* the hairlines come from each card, not from the grid behind it, so a cell
   left empty at some window widths stays white rather than showing grey */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#fff;border:1px solid var(--line)}
.svc{background:#fff;box-shadow:0 0 0 1px var(--line);padding:36px 30px;transition:background .18s}
.svc:hover{background:#FAFAFB}
.svc-ico{width:34px;height:34px;margin-bottom:18px;color:var(--slate)}
.svc h3{font-size:19.5px;margin-bottom:10px}
.svc p{font-size:15.5px;color:var(--ink-soft);line-height:1.8}
.price-note{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;margin-top:30px;padding:24px 30px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--seal)}
.price-note p{font-size:17px;color:var(--ink);line-height:1.7;margin:0;flex:1 1 320px}
.price-note .btn{flex:none}

/* ---------- industries ---------- */
.ind-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.ind{background:var(--paper-alt);border:1px solid var(--line);border-radius:var(--radius);padding:26px 12px;text-align:center;transition:border-color .18s,transform .18s}
.ind:hover{border-color:var(--slate);transform:translateY(-3px)}
.ind svg{width:30px;height:30px;color:var(--slate);margin:0 auto 12px}
.ind span{font-size:15px;font-weight:500;display:block}
.ind small{font-size:12.5px;color:var(--ink-faint)}

/* ---------- inline note ---------- */

/* ---------- about ---------- */
.about-panel{margin-top:58px;background:var(--slate);color:#E9EBEC;border-radius:var(--radius);padding:40px 42px}
.about-panel h3{color:#fff;font-size:clamp(21px,2.4vw,26px);margin-bottom:16px}
.about-panel p{margin-bottom:16px;color:#D4D7DA;font-size:15.5px}
.about-panel p:last-child{margin-bottom:0}
/* ---------- testimonials ---------- */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tst{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;display:flex;flex-direction:column}
.stars{color:var(--gold);font-size:14px;letter-spacing:2px;margin-bottom:14px}
.tst q{font-size:15.5px;color:var(--ink);line-height:1.85;quotes:none;flex:1}
.tst-who{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.tst-who b{display:block;font-size:15px;font-weight:500}
.tst-who span{font-size:13.5px;color:var(--ink-faint)}

/* ---------- contact ---------- */
.ct-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;--label-w:96px}
html[lang="en"] .contact-card{--label-w:132px}
.contact-card h3{font-size:19px;margin-bottom:18px}
.cline{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.cline:last-of-type{border-bottom:0}
.cline b{color:var(--ink-soft);font-weight:400;min-width:var(--label-w);flex:none}
.cline .val{font-weight:500}
.ct-phone{display:inline-block;font-family:"Noto Serif SC",serif;font-weight:700;font-size:clamp(27px,3.8vw,35px);line-height:1.15;color:var(--ink);letter-spacing:.01em;margin:2px 0 8px}
.ct-head{display:flex;gap:12px;font-size:15px;margin-bottom:2px}
.ct-head h3{margin-bottom:0;flex:none;min-width:var(--label-w);font-family:inherit;font-weight:400;font-size:15px;line-height:inherit;letter-spacing:0;color:var(--ink-soft)}
.ct-head .ct-phone{margin:0;font-family:inherit;font-size:15px;font-weight:500;line-height:inherit;letter-spacing:0;white-space:nowrap}
.ct-phone:hover{color:var(--seal)}
.ct-phone-note{font-size:14.5px;color:var(--ink-soft);margin-bottom:8px}
.ct-actions{display:none;gap:12px;flex-wrap:wrap;margin-top:24px}
.qr-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center}
.qr-link{max-width:300px}
.qr-img{display:block;width:100%;height:auto}
/* Both QR codes — the header panel and the contact card — are buttons: pressing
   one opens the same WeChat link the image encodes. Width stays with .qr-link so
   the contact card can cap it; in the header panel the QR fills the panel. */
.qr-tap{display:block;width:100%;margin:0 auto;padding:6px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .18s,box-shadow .18s,transform .18s}
.qr-tap img{display:block;width:100%;height:auto}
.qr-tap:hover{border-color:var(--wechat);box-shadow:0 6px 16px rgba(7,193,96,.18);transform:translateY(-2px)}
.qr-tap:active{border-color:var(--wechat-dark);box-shadow:none;transform:translateY(0) scale(.985)}
.qr-tap:focus-visible{outline:2px solid var(--wechat);outline-offset:3px}
.qr-btn{display:block;width:100%;max-width:var(--wx-btn-w);margin:10px auto 0;padding:var(--wx-btn-pad);font-size:var(--wx-btn-fs);line-height:1.4;text-align:center;background:var(--wechat);color:#fff}
.qr-btn:hover{background:var(--wechat-dark)}
.qr-cap{font-size:14px;color:var(--ink-soft);margin-top:14px}
.qr-cap-top{margin-top:0;margin-bottom:14px;font-weight:700;color:var(--seal)}
.wx-id{margin-top:16px;font-size:14px;color:var(--ink-soft);display:flex;flex-direction:column;gap:3px;align-items:center}
.wx-id b{font-size:17px;font-weight:500;color:var(--ink);letter-spacing:.01em;user-select:all}
/* both buttons stack as a matched pair, no wider than the QR they sit under */
.wx-copy{display:block;width:100%;max-width:var(--wx-btn-w);margin:14px auto 0;padding:var(--wx-btn-pad);font-size:var(--wx-btn-fs);line-height:1.4;text-align:center;background:var(--wechat);color:#fff}
.wx-copy:hover{background:var(--wechat-dark)}
.wx-copy.copied{background:var(--slate)}
/* device-aware guidance: scanning suits a computer, copying suits a phone */
.on-touch{display:none}

/* ---------- cta band ---------- */
.band{background:var(--slate);color:#fff;text-align:center;padding:54px 0}
.band h2{font-size:clamp(24px,3.2vw,34px);margin-bottom:14px}
.band p{color:#BFC3C7;margin-bottom:28px;font-size:17px}

/* ---------- footer ---------- */
footer{background:#1B1F23;color:#9AA0A6;padding:44px 0 26px;font-size:14.5px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:34px;border-bottom:1px solid #2C3237}
.f-grid h4{color:#fff;font-size:15.5px;margin-bottom:14px;font-weight:500;font-family:"Noto Sans SC",sans-serif}
.f-grid ul{list-style:none;display:grid;gap:9px}
.f-grid a:hover{color:#fff}
footer .logo{color:#fff;margin-bottom:12px}
.f-bottom{padding-top:22px;display:flex;justify-content:flex-start;flex-wrap:wrap;gap:12px;font-size:13.5px;color:#767C82}

/* ---------- responsive ---------- */
/* dial and text buttons only appear on a device that can actually dial */
@media (hover:none) and (pointer:coarse){
  .ct-actions{display:flex}
  .on-touch{display:block}
  .btn.on-touch{display:inline-block}
  .on-desktop{display:none}
}

@media (hover:none) and (pointer:coarse){
  a[href^="tel:"],a[href^="sms:"]{pointer-events:auto;cursor:pointer}
}

/* stacked full-width dial buttons on small touch screens */
@media (hover:none) and (pointer:coarse) and (max-width:620px){
  .ct-actions{display:grid;grid-template-columns:1fr;gap:10px}
}

@media (max-width:960px){
  .burger{display:block;margin-left:10px}
  .nav-phone{margin-left:auto;padding-left:14px;font-size:15px}
  .lang-mini{display:inline-flex;margin-left:10px}
  .nav-wx{margin-left:10px}
  .nav-drop{display:none;position:absolute;top:100%;left:0;right:0;z-index:65;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 16px 30px rgba(21,34,43,.15);padding:4px 26px 22px}
  .nav.open .nav-drop{display:block}
  /* same link treatment as the wide bar: soft ink, seal underline hugging the
     text on hover/active. the row rule moves to the li so the 2px accent the
     desktop nav uses is still free to do its job */
  .nav-drop ul{display:grid;gap:0;width:100%;margin:0;font-size:15.5px}
  .nav-drop ul li{border-bottom:1px solid var(--line)}
  .nav-drop ul a{display:inline-block;padding:12px 0 6px;margin-bottom:7px}
  .nav-drop .nav-side{display:flex;width:100%;margin-top:18px;margin-left:0}
}

/* between 960 and 1100 the bar is tight, so the WeChat button goes icon-only */
@media (min-width:961px) and (max-width:1100px){
  .nav-wx span{display:none}
  .nav-wx{--wx-nav-pad:8px 10px}
}

@media (max-width:980px){
  .nav ul{gap:20px;font-size:15px}
  .nav{gap:18px}
  .hero-grid,.ct-grid{grid-template-columns:1fr;gap:44px}
  /* video sits below the text now, so the lede may use the full page width */
  .hero p.lede{max-width:none}
  .svc-grid,.tst-grid{grid-template-columns:repeat(2,1fr)}
  .ind-grid{grid-template-columns:repeat(3,1fr)}
  .f-grid{grid-template-columns:1fr 1fr}
}
/* very small phones: drop the handset glyph, keep the number itself */
/* smallest phones: only the inline 传媒 gives way — the stacked English
   "Marketing" costs no extra bar width, so it stays */
@media (max-width:345px){
  html[lang="zh-CN"] header .logo .mark{display:none}
  .nav-phone{padding-left:6px}
}

@media (max-width:400px){
  .logo{font-size:19px}
  html[lang="zh-CN"] .logo .mark{font-size:19px}
  .nav-phone{font-size:12.5px;padding-left:8px}
  .nav-phone svg{display:none}
  .np-full{display:none}
  .np-short{display:inline}
  .lang-mini{margin-left:6px;padding:7px 6px;min-width:32px;font-size:13px}
  .nav-wx{--wx-nav-pad:7px;margin-left:6px}
  .nav-wx{--wx-nav-icon:16px}
  .burger{margin-left:6px;padding:7px 8px}
  .burger span{width:18px}
}

@media (max-width:620px){
  .price-note{padding:22px 20px}
  .price-note .btn{width:100%;text-align:center}
  html{scroll-padding-top:46px}
  .section{padding:46px 0}
  .about-panel{padding:30px 24px;margin-top:42px}
  .hero{padding:24px 0 48px}
  .svc-grid,.tst-grid{grid-template-columns:1fr}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr}
  /* size each button to its own label and never wrap the text: side by side
     when both fit, otherwise the second drops to its own row and both grow
     to full width. either way the two buttons are always the same height */
  .hero-actions{align-items:stretch;gap:12px}
  .hero-actions .btn{flex:1 1 auto;padding-left:16px;padding-right:16px;text-align:center;white-space:nowrap}
  .wx-panel{right:16px;left:auto;width:min(250px,calc(100vw - 32px))}
  header .wrap{padding:0 16px}
  .contact-card{padding:24px 20px;--label-w:72px}
  html[lang="en"] .contact-card{--label-w:118px}
  .qr-card{padding:22px 18px}
  .cline b{min-width:84px}
  .cline span,.cline a,.wx-id b{overflow-wrap:anywhere}
  .nav-drop{padding:4px 16px 20px}
  .nav{gap:0;height:68px}
  .nav-wx span{display:none}
  .lang-mini{margin-left:8px;padding:8px;min-width:36px;font-size:13.5px}
  .nav-wx{--wx-nav-pad:8px 9px;margin-left:8px}
  .burger{margin-left:8px;padding:8px 10px}
  .logo{font-size:23px}
  html[lang="zh-CN"] .logo .mark{font-size:23px}
  .logo .mark{font-size:12px}
  /* "Marketing" is far wider than 传媒, so on a phone it sits under 鑫旺
     instead of disappearing — the bar keeps one line either way */
  html[lang="en"] header .logo{flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.05}
  html[lang="en"] header .logo .mark{font-size:10.5px;letter-spacing:.14em;margin:2px 0 0;line-height:1}
  .nav-phone{font-size:14.5px;gap:5px}
  .nav-phone svg{width:16px;height:16px}
  .ct-actions .btn{text-align:center}
}
html[lang="en"] .zh-only{display:none}

/* last word on the smallest phones: the tagline tightens rather than wraps.
   kept after the 620px block so it wins on ordering */
@media (max-width:345px){
  html[lang="en"] header .logo .mark{font-size:9.5px;letter-spacing:.08em}
  .contact-card{padding-left:14px;padding-right:14px}
}