/* =========================================================
   THEME PACK — "Orbit"（暗色科技风）

   这个文件是主题包，只放设计变量，不放任何组件样式。
   组件样式在 style.css，它只读这里的 token。

   换主题 = 放一份同名的 theme-*.css，在
   templates/fragments/layout.html 里换掉这一行：
       <link rel="stylesheet" th:href="@{/css/theme-orbit.css?v=1}"/>

   一个主题包必须提供的 token：颜色（surface/base/line/ink/muted/accent）、
   形状（--radius）、排版（--font-display/--font-sans/--font-mono）、
   尺寸（--maxw/--pad）、动效（--ease）、以及 --grid 和 --shadow-*。

   ── 颜色推导 ────────────────────────────────────────────
   后台 site_setting 只有两个可用的颜色字段，layout.html 会把它们
   注入成 --navy-900（主色）和 --brass（辅色）。整个主题从这两个
   值推导出来，所以后台取色器是真的在起作用，不需要加任何数据库字段。

   --base 把主色压暗成底色：主色只贡献色相，不贡献明度，
   所以无论后台选什么颜色，底都是深的、正文都能读。
   ========================================================= */
:root{
  /* 兜底：site 为空时 layout.html 不会注入，用这两行 */
  --navy-900:#04070E;
  --brass:#22D3EE;

  /* 底色：主色压暗（32% 主色 + 68% 近黑） */
  --base:color-mix(in srgb, var(--navy-900) 32%, #04070E);

  /* 表面：从底色向白推，得到可分辨的层次 */
  --paper:var(--base);
  --paper-alt:color-mix(in srgb, var(--base) 94%, #fff);
  --paper-raised:color-mix(in srgb, var(--base) 88%, #fff);
  --navy-700:color-mix(in srgb, var(--base) 88%, #fff);
  --navy-500:color-mix(in srgb, var(--base) 76%, #fff);

  /* 线 */
  --line:color-mix(in srgb, var(--base) 81%, #fff);
  --line-strong:color-mix(in srgb, var(--base) 69%, #fff);

  /* 文字：不跟主色走，保证任何品牌色下对比度都成立 */
  --ink:#E6EDF7;
  --muted:#8B9BB4;

  /* 强调：辅色的深浅两档；--accent-ink 是压在辅色实底上的字色 */
  --brass-dark:color-mix(in srgb, var(--brass) 68%, #fff);
  --brass-light:color-mix(in srgb, var(--brass) 45%, #fff);
  --accent-ink:#04070E;

  /* 形状：工业风，圆角收到最小 */
  --radius:3px;

  /* 金属：机加工边缘的顶光 + 极淡颗粒。
     两个值都很小，是「看得出但说不出」的那种量级。 */
  --edge-light:inset 0 1px 0 rgba(255, 255, 255, .07);
  --edge-light-strong:inset 0 1px 0 rgba(255, 255, 255, .16);
  --grain-opacity:.035;
  --sheen:rgba(255, 255, 255, .075);

  /* 尺寸 */
  --maxw:1240px;
  --pad:32px;

  /* 排版 */
  --font-display:"Saira","Afacad",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;
  --font-sans:"Afacad",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* 照片遮罩：三档，跟着底色走，不写死 */
  --scrim-strong:color-mix(in srgb, var(--base) 93%, transparent);
  --scrim-mid:color-mix(in srgb, var(--base) 72%, transparent);
  --scrim-soft:color-mix(in srgb, var(--base) 34%, transparent);

  /* 装饰 */
  --grid:rgba(255,255,255,.034);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5),0 6px 16px rgba(0,0,0,.4);
  --shadow-md:0 18px 44px rgba(0,0,0,.55);
  --rule:1px solid var(--line);
  --ease:cubic-bezier(.22,.61,.36,1);
}

@font-face{font-family:"Saira";font-weight:500 700;font-style:normal;font-display:swap;src:url("/fonts/saira-latin.woff2") format("woff2")}
@font-face{font-family:"Afacad";font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/afacad-400.woff2") format("woff2")}
@font-face{font-family:"Afacad";font-weight:500;font-style:normal;font-display:swap;src:url("/fonts/afacad-500.woff2") format("woff2")}
@font-face{font-family:"Afacad";font-weight:600;font-style:normal;font-display:swap;src:url("/fonts/afacad-600.woff2") format("woff2")}
@font-face{font-family:"Afacad";font-weight:700;font-style:normal;font-display:swap;src:url("/fonts/afacad-700.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/plexmono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url("/fonts/plexmono-500.woff2") format("woff2")}

/* ===== Orbit 科技专属 Hero 覆盖：非对称分栏与扫光 ===== */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  z-index: 3;
  pointer-events: none;
}
.hero::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  right: -34%;
  width: 26%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, var(--sheen) 45%, color-mix(in srgb, var(--sheen) 130%, transparent) 50%, var(--sheen) 55%, transparent);
  animation: hero-sheen 15s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes hero-sheen {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(-192%); opacity: 0; }
}
.hero-slide::after {
  background: linear-gradient(90deg, var(--base) 0 46.8%, transparent 48.2%) !important;
  background-color: color-mix(in srgb, var(--base) 14%, transparent) !important;
}
.hero-slide::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 88px),
    linear-gradient(90deg, transparent calc(47% - 1px), var(--line) calc(47% - 1px), var(--line) 47%, transparent 47%) !important;
}
.hero-caption {
  width: 47% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 132px 48px 108px max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad))) !important;
}
.hero-eyebrow {
  color: var(--muted) !important;
  font-family: var(--font-mono) !important;
  font-size: .68rem !important;
  font-weight: 400 !important;
  letter-spacing: .16em !important;
  margin-bottom: 26px !important;
}
.hero-eyebrow::before {
  width: 30px !important;
  height: 1px !important;
}
.hero-copy h1, .hero-copy h2 {
  font-size: clamp(1.95rem, 3.2vw, 2.95rem) !important;
  letter-spacing: -.035em !important;
  line-height: 1.05 !important;
  margin-bottom: 20px !important;
}
.hero-copy p {
  max-width: 44ch !important;
  font-size: clamp(.98rem, 1.2vw, 1.08rem) !important;
  color: rgba(255, 255, 255, .76) !important;
  margin-bottom: 34px !important;
}
.hero-dot {
  border-radius: 0 !important;
}
.hero-dot::before {
  border-radius: 0 !important;
}
.hero-arrow {
  border-radius: 0 !important;
  border: 1px solid rgba(255, 255, 255, .26) !important;
  background: color-mix(in srgb, var(--base) 55%, transparent) !important;
}
.hero-arrow--prev {
  left: calc(47% + 22px) !important;
}

/* ===== Orbit 科技专属装饰：切角标与网格视界边线 ===== */
.section > .container:not(.container--narrow)::before,
.section > .container:not(.container--narrow)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--line) 10%, var(--line) 90%, transparent);
}
.section > .container:not(.container--narrow)::before { left: 0; }
.section > .container:not(.container--narrow)::after { right: 0; }
.section--deep > .container:not(.container--narrow)::before,
.section--deep > .container:not(.container--narrow)::after {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .09) 10%, rgba(255, 255, 255, .09) 90%, transparent);
}

.section-head {
  position: relative;
  padding-top: 26px;
}
.section-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}
.section-head::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 64px;
  height: 2px;
  background: var(--brass);
}
.section-head.centered::after {
  left: 50%;
  transform: translateX(-50%);
}

.cta-tile::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 22px;
  height: 22px;
  border-top: 2px solid var(--brass);
  border-left: 2px solid var(--brass);
}/* =========================================================
   YINGKE WEB - 组件样式（不含设计变量）

   所有颜色、字体、圆角、动效都来自主题包，见 css/theme-orbit.css。
   这个文件里不应该出现写死的品牌色——加新组件时只读 token。

   设计思路：卖的是网站开发和硬件运维，所以页面把自己的系统露出来——
   版心竖线标出内容列、尺规式标题段、照片用 1px 细框而非投影、
   日期与编号用等宽字。强调色只以「线」的形式出现，不做发光。
   ========================================================= */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;overflow-x:hidden}
body{font-family:var(--font-sans);color:var(--ink);line-height:1.75;background:var(--paper);font-size:15.5px;letter-spacing:.012em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none;transition:color .18s ease,border-color .18s ease,background-color .18s ease}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--ink);line-height:1.15;font-weight:600;letter-spacing:-.015em;margin:0}
p{margin:0}
::selection{background:var(--brass);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--base)}
::-webkit-scrollbar-thumb{background:var(--line-strong);border:3px solid var(--base);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--navy-500)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
/* 极淡颗粒，给深色面一点"磨砂金属"的质感。固定在视口、不吃事件、不随滚动重绘。 */
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--grain-opacity);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.container--narrow{max-width:840px}

/* ===== Header ===== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:transparent;border-bottom:0;transition:background .28s var(--ease),border-color .28s,backdrop-filter .28s}
.topbar{border-top:2px solid transparent;background-repeat:no-repeat;background-position:top;background-size:100% 2px;
  background-image:linear-gradient(90deg,color-mix(in srgb,var(--brass) 26%,var(--base)) 0%,var(--brass) 16%,color-mix(in srgb,var(--brass) 60%,#fff) 50%,var(--brass) 84%,color-mix(in srgb,var(--brass) 26%,var(--base)) 100%)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px}
.logo{display:flex;align-items:center;gap:14px}
.logo-img{height:clamp(48px, 6vh, 62px);max-height:62px;width:auto;max-width:280px;object-fit:contain;display:block}
.logo-mark{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;background:var(--brass);color:var(--accent-ink);font-family:var(--font-display);font-weight:600;border-radius:var(--radius);letter-spacing:.04em;font-size:1.05rem}
.logo-text{font-family:var(--font-display);font-weight:600;font-size:1.25rem;color:#fff;line-height:1.05;letter-spacing:.005em;transition:color .28s}
.logo-text small{display:block;font-family:var(--font-mono);font-weight:400;font-size:.6rem;color:rgba(255,255,255,.78);letter-spacing:.16em;text-transform:uppercase;margin-top:5px}
.main-nav ul{list-style:none;margin:0;padding:0}
.nav-root{display:flex}
.nav-root>li{position:relative}
.nav-root>li>a{display:flex;align-items:center;height:78px;padding:0 16px;font-family:var(--font-mono);font-size:.82rem;font-weight:400;color:rgba(255,255,255,.88);text-transform:uppercase;letter-spacing:.08em}
.site-header.is-scrolled{background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:0 1px 0 var(--line)}
.site-header.is-scrolled .logo-mark{background:var(--base);color:var(--brass)}
.site-header.is-scrolled .logo-text,.site-header.is-scrolled .nav-root>li>a{color:var(--ink)}
.site-header.is-scrolled .logo-text small{color:var(--muted)}
.nav-root>li>a::after{content:"";position:absolute;left:15px;right:15px;bottom:0;height:2px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .26s var(--ease)}
.nav-root>li>a:hover::after{transform:scaleX(1)}
.nav-dropdown,.nav-subdropdown{position:absolute;background:var(--paper-alt);border-top:2px solid var(--brass);box-shadow:var(--shadow-md);padding:10px 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:20}
.nav-dropdown{top:78px;left:0;min-width:260px}
.nav-subdropdown{left:calc(100% - 1px);top:-10px;min-width:250px}
.nav-root>li:hover>.nav-dropdown,.nav-dropdown li:hover>.nav-subdropdown,.nav-root>li:focus-within>.nav-dropdown,.nav-dropdown li:focus-within>.nav-subdropdown{opacity:1;visibility:visible;transform:none}
.nav-dropdown a,.nav-subdropdown a{display:block;padding:11px 20px;color:var(--ink);font-size:.92rem;line-height:1.35}
.nav-dropdown a:hover,.nav-subdropdown a:hover{background:var(--paper-raised);color:var(--ink)}

/* ===== Language Switcher ===== */
.lang-switcher{position:relative;display:inline-flex;align-items:center;height:34px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.95);transition:background .25s ease,border-color .25s ease;flex-shrink:0}
.lang-switcher:hover{background:rgba(255,255,255,.12);border-color:var(--brass)}
.lang-switcher:focus-within{border-color:var(--brass)}
.site-header.is-scrolled .lang-switcher{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);color:var(--ink)}
.site-header.is-scrolled .lang-switcher:hover{background:rgba(255,255,255,.1);border-color:var(--brass)}
.site-header.is-scrolled .lang-switcher:focus-within{border-color:var(--brass)}
.lang-globe{position:absolute;left:10px;width:14px;height:14px;color:var(--brass);pointer-events:none}
.lang-arrow{position:absolute;right:10px;width:10px;height:10px;color:currentColor;opacity:.75;pointer-events:none;transition:transform .2s ease,opacity .2s ease}
.lang-switcher:focus-within .lang-arrow,.lang-switcher:hover .lang-arrow{opacity:1}
.lang-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;outline:none;color:inherit;font-family:var(--font-mono);font-size:.74rem;font-weight:400;letter-spacing:.08em;padding:0 26px 0 30px;height:100%;line-height:34px;cursor:pointer;border-radius:99px}
.lang-select option{background-color:var(--paper-raised);color:#fff;font-size:13px;font-weight:normal;padding:8px 12px}

/* ===== Hero: 非对称分栏 =====
   左 47% 文案压在纯色底上，右 53% 是一整块实拍图，中间一条 1px 竖规。
   图不再是整屏背景＋遮罩，而是被当成一件"产品"摆进版面里 —— 这是全站
   唯一的大图位，也是唯一一处有动态光效的地方。
   CSS-only：模板把 background-image 写在 .hero-slide 行内，所以这里靠
   background-size/position 把它压到右半边，不用改模板。 */
/* ===== Hero ===== */
.hero{position:relative;background:var(--base);overflow:hidden}
.hero-track{display:flex;transition:transform .72s var(--ease)}
.hero-slide{flex:0 0 100%;width:100%;min-height:min(88dvh,760px);background-position:center;background-size:cover;display:flex;align-items:center;position:relative}
.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(96deg,rgba(10,25,48,.93) 4%,rgba(10,25,48,.68) 42%,rgba(10,25,48,.18) 100%)}
.hero-caption{position:relative;z-index:2;max-width:760px;padding:150px 32px 120px}
.hero-caption>*{animation:hero-rise .7s var(--ease) both}
.hero-caption>:nth-child(2){animation-delay:.09s}
.hero-caption>:nth-child(3){animation-delay:.17s}
.hero-caption>:nth-child(4){animation-delay:.25s}
@keyframes hero-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--brass);font-size:.74rem;font-weight:600;letter-spacing:.21em;text-transform:uppercase;margin-bottom:22px}
.hero-eyebrow::before{content:"";width:44px;height:2px;background:currentColor}
.hero-copy h1,.hero-copy h2{font-size:clamp(2.55rem,4.75vw,4.05rem);color:#fff;letter-spacing:-.015em;line-height:1.12;margin-bottom:18px;text-wrap:balance}
.hero-copy p{max-width:520px;color:rgba(255,255,255,.91);font-size:clamp(1.02rem,1.45vw,1.2rem);line-height:1.58;margin-bottom:30px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-dots{position:absolute;left:0;right:0;bottom:26px;z-index:3;display:flex;gap:10px;justify-content:center;padding:0 32px}
.hero-dot{width:34px;height:34px;border:0;border-radius:50%;background:transparent;cursor:pointer;position:relative}
.hero-dot::before{content:"";position:absolute;top:50%;left:50%;width:10px;height:2px;background:rgba(255,255,255,.52);transform:translate(-50%,-50%);transition:width .25s,background-color .25s}
.hero-dot.is-active::before{width:38px;background:var(--brass)}
.hero-arrow{position:absolute;top:50%;z-index:3;width:48px;height:48px;border:1px solid rgba(255,255,255,.38);border-radius:50%;background:rgba(10,25,48,.32);color:#fff;font-size:.95rem;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px);transition:border-color .18s,color .18s,background-color .18s}
.hero-arrow:hover,.hero-arrow:focus-visible{border-color:var(--brass);color:var(--brass);background:color-mix(in srgb,var(--base) 78%,transparent)}
.hero-arrow--prev{left:22px}
.hero-arrow--next{right:22px}
.nav-toggle{display:none;width:44px;height:44px;background:transparent;border:0;color:#fff;font-size:1.4rem;cursor:pointer}

/* ===== Sections: the measured column ===== */
.section{position:relative;padding:104px 0}
.section>.container{position:relative}
.section--alt{background:var(--paper-alt)}
.section--deep{background:var(--base);color:#fff}
.section--tight{padding:80px 0}
.section-head{position:relative;margin-bottom:54px}
.section-head h2{max-width:760px}
.section-head.centered{text-align:center}
.section-head.centered h2,.section-head.centered p{margin-left:auto;margin-right:auto}
.section-head h2,.section-title-lg{font-size:clamp(1.95rem,3.3vw,2.75rem);letter-spacing:-.032em}
.section-title-lg{margin-bottom:20px}
.section-head p,.section-lead{color:var(--muted);font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.62;margin-top:20px;max-width:600px}
.section--deep .section-head p,.section--deep .section-lead{color:rgba(255,255,255,.8)}
.split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(48px,5vw,86px);align-items:center}
.split-media{position:relative}
.split-media img{width:100%;height:min(560px,72dvh);object-fit:cover;border:1px solid var(--line);filter:saturate(.85)}
.about-custom-content{color:inherit;line-height:1.7}
.about-custom-content img{max-width:100%;height:auto;border-radius:var(--radius);object-fit:cover}
.about-custom-content h1,.about-custom-content h2,.about-custom-content h3{margin-top:0;margin-bottom:14px;color:var(--ink)}
.about-custom-content p{margin-top:0;margin-bottom:14px;color:var(--muted);line-height:1.68}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-family:var(--font-mono);font-size:.68rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--brass)}
.eyebrow--light{color:rgba(255,255,255,.6)}
.eyebrow--center::before{display:none}
.section-lead{margin:0}

/* ===== Cards: instrument panels, not lifted cards ===== */
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.card-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{position:relative;display:flex;flex-direction:column;background:var(--paper-alt);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--edge-light);overflow:hidden;transition:border-color .22s ease,background-color .22s ease}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .34s var(--ease);z-index:2}
.card:hover{border-color:var(--line-strong);background:var(--paper-raised)}
.card:hover::before{transform:scaleX(1)}
.card-media{height:220px;background:var(--base);overflow:hidden;position:relative;border-bottom:1px solid var(--line)}
.card-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.02);transition:transform .5s var(--ease),filter .4s ease}
.card:hover .card-media img{transform:scale(1.02);filter:saturate(1) contrast(1.02)}
.card-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.card-body h3{font-size:1.26rem;margin-bottom:11px}
.card-body p{color:var(--muted);font-size:.94rem;line-height:1.6;margin-bottom:20px;flex:1}
.card-link{margin-top:auto;display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-family:var(--font-mono);font-size:.68rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase}
.card-link::before{content:"";width:18px;height:1px;background:var(--brass);transition:width .24s var(--ease)}
.card:hover .card-link::before{width:32px}
.card--event .event-date{display:inline-block;margin-bottom:10px}
.event-list{list-style:none;margin:0;padding:0;display:grid}
.event-row{display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:28px;align-items:start;padding:28px 0;border-bottom:var(--rule);transition:border-color .2s ease}
.event-row:hover{border-bottom-color:var(--line-strong)}
.event-row:first-child{padding-top:0}
.event-row:last-child{border-bottom:0}
.event-date{color:var(--brass);font-family:var(--font-mono);font-size:.76rem;font-weight:400;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.event-row h3{font-size:1.3rem}
.event-row p{color:var(--muted);margin-top:9px;max-width:660px}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--brass);color:var(--accent-ink);border:1px solid var(--brass);border-radius:var(--radius);padding:15px 28px;font-family:var(--font-sans);font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.28);transition:background-color .18s,color .18s,border-color .18s,box-shadow .18s}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--brass);border-color:var(--brass);box-shadow:none}
.btn--link{background:transparent;border:0;padding:0;color:var(--ink);letter-spacing:.13em;box-shadow:none}
.btn--link:hover,.btn--link:focus-visible{color:var(--brass);box-shadow:none}
.btn--light{background:var(--ink);border-color:var(--ink);box-shadow:none}
.btn--light:hover,.btn--light:focus-visible{background:transparent;color:var(--ink);border-color:var(--brass)}
.btn--small{padding:9px 16px;font-family:var(--font-mono);font-size:.68rem;font-weight:400;letter-spacing:.1em}
.btn--full{width:100%}
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--ink);box-shadow:none}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--brass);color:var(--brass)}
.btn--danger{background:#B91C1C;border-color:#B91C1C;color:#fff}
.btn--danger:hover,.btn--danger:focus-visible{background:transparent;color:#F87171;border-color:#B91C1C}
.btn[disabled]{opacity:.56;pointer-events:none}

/* ===== CTA band ===== */
.section--cta{position:relative;padding:112px 0;overflow:hidden;background:var(--base);color:#fff}
.section--cta::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--brass),rgba(34,211,238,.06))}
.cta-bg{position:absolute;inset:0;background-position:center;background-size:cover;filter:saturate(.5)}
.cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(116deg,var(--scrim-strong) 12%,var(--scrim-mid) 70%,var(--scrim-soft) 100%)}
.cta-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.cta-grid.cta-grid--single,.cta-grid:has(> :only-child){grid-template-columns:minmax(0,720px);justify-content:center}
.cta-tile{position:relative;padding:46px 42px;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);background:rgba(255,255,255,.03);box-shadow:var(--edge-light)}
.cta-tile--accent{border-color:rgba(34,211,238,.4)}
.cta-tile h3{color:#fff;font-size:clamp(1.5rem,2vw,1.85rem);margin-bottom:12px;letter-spacing:-.02em}
.cta-tile p{color:rgba(255,255,255,.8);font-size:.98rem;line-height:1.6;margin-bottom:26px}
.contact-panel{position:relative;z-index:2;max-width:680px;margin-left:auto;background:var(--paper-alt);color:var(--ink);border:1px solid var(--line);border-top:2px solid var(--brass);border-radius:var(--radius);box-shadow:var(--edge-light);padding:52px 50px}
.contact-panel h2{font-size:clamp(2rem,2.9vw,2.6rem);margin-bottom:14px;letter-spacing:-.026em}
.contact-panel p{color:var(--muted);line-height:1.6}
.contact-details{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:18px}
.contact-details strong{display:block;font-family:var(--font-mono);font-size:.72rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.contact-details span,.contact-details a{display:block;color:var(--ink)}
.contact-details a:hover{color:var(--brass)}

/* ===== Page banner ===== */
.page-banner{position:relative;background-color:var(--base);background-image:linear-gradient(94deg,var(--scrim-strong) 6%,var(--scrim-mid) 52%,var(--scrim-soft) 100%),var(--banner);background-position:center;background-size:cover;color:#fff;min-height:520px;display:flex;align-items:flex-end;padding:160px 0 72px}
.page-banner::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 92px);
  -webkit-mask-image:linear-gradient(90deg,#000 6%,transparent 82%);
  mask-image:linear-gradient(90deg,#000 6%,transparent 82%)}
.page-banner h1{color:#fff;font-size:clamp(2.4rem,4.6vw,3.4rem);letter-spacing:-.028em;margin-top:14px;max-width:820px}
.page-banner::after{content:"";position:absolute;left:max(var(--pad),calc((100vw - var(--maxw)) / 2 + var(--pad)));bottom:0;height:2px;width:88px;background:var(--brass)}
.page-banner .lead{color:rgba(255,255,255,.86);font-size:clamp(1.02rem,1.2vw,1.14rem);line-height:1.58;margin-top:16px;max-width:700px}
.banner-about-us{--banner:url("/img/office-team-meeting.jpg")}
.banner-capabilities{--banner:url("/img/office-overhead.jpg")}
.banner-insights{--banner:url("/img/office-openplan.jpg")}
.banner-events{--banner:url("/img/office-roundtable.jpg")}
.banner-contact-us{--banner:url("/img/office-handshake.jpg")}
.breadcrumb{display:flex;align-items:center;color:rgba(255,255,255,.62);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;margin-bottom:12px}
.breadcrumb a{color:var(--brass);border-bottom:1px solid transparent;transition:border-color .18s,color .18s}
.breadcrumb a:hover{border-color:currentColor;color:var(--brass-light)}
.crumb-sep{margin:0 9px;opacity:.5}
.page-content{font-size:1.05rem;line-height:1.72}
.page-content>* + *{margin-top:1em}
.page-content h2{font-size:clamp(1.55rem,2.1vw,1.95rem);letter-spacing:-.022em;margin-top:2.1em}
.page-content h3{font-size:1.3rem;margin-top:1.9em}
.page-content a{color:var(--brass);border-bottom:1px solid var(--brass)}
.page-content a:hover{color:var(--brass-dark)}
.page-content a:has(img){border-bottom:none}
.page-content img{margin:28px 0;border:1px solid var(--line);border-radius:var(--radius);transition:border-color .2s ease}
.page-content a img{cursor:pointer}
.page-content a:hover img{border-color:var(--brass)}
.page-content ul,.page-content ol{padding-left:1.25em;margin-top:1em}
.page-content li + li{margin-top:.45em}
.empty{color:var(--muted);padding:52px 0;text-align:center}

/* ===== Footer ===== */
.site-footer{position:relative;background:var(--base);color:#C6D2E2;padding:70px 0 0}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--brass),rgba(34,211,238,.06))}
.footer-grid{display:grid;grid-template-columns:1.55fr .85fr .55fr .55fr;gap:0;padding-bottom:46px}
.footer-grid>*{padding-left:clamp(20px,3vw,40px);border-left:1px solid var(--line)}
.footer-grid>*:first-child{padding-left:0;border-left:0}
.footer-brand p{color:rgba(198,210,226,.72);font-size:.94rem;line-height:1.6;max-width:300px;margin-top:18px}
.site-footer h4{color:#fff;font-family:var(--font-mono);font-size:.7rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.footer-links li + li{margin-top:10px}
.footer-links a,.site-footer .muted{color:rgba(198,210,226,.78);font-size:.9rem}
.footer-links a:hover{color:var(--brass)}
.footer-h4--underline{padding-bottom:10px;border-bottom:1px solid var(--brass);display:inline-block;margin-bottom:18px}
.social-btn{display:block;width:fit-content;max-width:100%;border:1px solid var(--brass);color:#fff;font-size:.85rem;letter-spacing:.02em;text-transform:none;padding:7px 14px;text-align:center;border-radius:var(--radius);box-sizing:border-box;word-break:break-word;transition:border-color .18s,color .18s,background-color .18s}
a.social-btn:hover,a.social-btn:focus-visible{background:var(--brass);border-color:var(--brass);color:var(--navy-900)}
span.social-btn{cursor:default}
.social-btn + .social-btn{margin-top:10px}
.copyright{border-top:1px solid var(--line);padding:21px 0}
.copyright .container{display:flex;justify-content:space-between;align-items:center;gap:18px;color:rgba(198,210,226,.6);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em}
.admin-link{color:rgba(198,210,226,.6)}
.admin-link:hover{color:var(--brass)}
.logo--light .logo-text{color:#fff}
.logo--light .logo-text small{color:var(--brass)}

/* ===== Admin login ===== */
.login-page{min-height:100dvh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 18% 18%,var(--paper-raised),var(--base) 72%);padding:40px 20px}
.login-card{width:100%;max-width:430px;background:var(--paper-alt);border:1px solid var(--line);border-top:2px solid var(--brass);border-radius:var(--radius);box-shadow:var(--edge-light);padding:46px 42px}
.login-card h1{font-size:1.7rem;letter-spacing:-.024em;margin-bottom:7px}
.login-card .muted{font-size:.92rem;margin-bottom:28px}
.login-card form{display:flex;flex-direction:column;gap:17px}
.login-card label{display:flex;flex-direction:column;gap:7px;font-family:var(--font-mono);font-size:.7rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.login-card input{padding:12px 13px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:inherit;font-size:.95rem}
.login-card input:focus-visible{outline:2px solid var(--brass);outline-offset:0;border-color:var(--brass)}
.alert{border-radius:var(--radius);font-size:.87rem;padding:11px 14px;margin-bottom:17px}
.alert--error{background:rgba(220,38,38,.14);color:#FCA5A5;border:1px solid rgba(220,38,38,.42)}
.alert--ok{background:rgba(22,163,74,.14);color:#86EFAC;border:1px solid rgba(22,163,74,.42)}

/* ===== Motion preferences ===== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto !important}
  .hero-track{transition-duration:.01ms !important}
  .hero::before{animation:none !important;opacity:0 !important}
  .hero-caption>*{animation:none !important}
  .card:hover .card-media img{transform:none}
}

/* ===== Responsive ===== */
@media(max-width:1080px){
  :root{--pad:26px}
  .header-inner{height:72px}
  .nav-root>li>a{height:72px;padding:0 12px}
  .nav-dropdown{top:72px}
  .section{padding:88px 0}
  .split{gap:42px}
  .card-grid{gap:22px}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 0}
  .footer-grid>*:nth-child(odd){padding-left:0;border-left:0}
  .page-banner{min-height:460px;padding:100px 0 80px}
}
@media(max-width:900px){
  .main-nav{position:absolute;top:72px;left:0;right:0;max-height:0;background:var(--paper);overflow:hidden;border-bottom:var(--rule);transition:max-height .28s var(--ease)}
  .main-nav.open{max-height:78vh;overflow:auto}
  .nav-root{flex-direction:column;gap:0;padding:10px 0}
  .nav-root>li>a{height:auto;padding:14px 24px;color:var(--ink)}
  .nav-root>li>a::after{display:none}
  .nav-dropdown,.nav-subdropdown{position:static;min-width:0;visibility:visible;opacity:1;transform:none;border:0;box-shadow:none;padding:0}
  .nav-dropdown a,.nav-subdropdown a{padding:10px 24px 10px 38px;color:var(--muted)}
  .nav-toggle{display:block;color:var(--ink);order:2}
  .site-header:not(.is-scrolled) .nav-toggle{color:#fff}
  .lang-switcher{margin-left:auto;margin-right:8px;height:30px}
  .lang-select{font-size:.7rem;padding:0 22px 0 26px;line-height:30px}
  .lang-globe{left:8px;width:12px;height:12px}
  .lang-arrow{right:8px;width:8px;height:8px}
  /* 分栏在窄屏塌回"整屏照片 + 遮罩"，图放右上角会切得很难看 */
  .hero::before{display:none}
  .hero-slide{min-height:min(80dvh,660px);background-position:center;background-size:cover}
  .hero-slide::before{background-image:repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 72px)}
  .hero-slide::after{background-image:linear-gradient(180deg,color-mix(in srgb,var(--base) 46%,transparent) 0%,color-mix(in srgb,var(--base) 88%,transparent) 52%,var(--base) 100%)}
  .hero-caption{width:100%;padding:118px var(--pad) 96px}
  .hero-copy p{max-width:52ch}
  .hero-arrow{display:none}
  .split,.card-grid,.card-grid--two,.cta-grid{grid-template-columns:1fr}
  .section{padding:74px 0}
  .section>.container:not(.container--narrow)::before,
  .section>.container:not(.container--narrow)::after{display:none}
  .section-head{padding-top:22px;margin-bottom:42px}
  .split-media{order:-1}
  .split-media img{height:min(420px,62dvh)}
  .event-row{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .event-date{margin-bottom:2px}
  .contact-panel{padding:42px 30px}
  .page-banner{min-height:420px;padding:80px 0}
  .page-banner h1{font-size:clamp(2.05rem,6.6vw,2.9rem)}
  .footer-grid{grid-template-columns:1fr;gap:0}
  .footer-grid>*{padding-left:0;border-left:0;padding-top:26px;margin-top:26px;border-top:1px solid var(--line)}
  .footer-grid>*:first-child{padding-top:0;margin-top:0;border-top:0}
}
@media(max-width:480px){
  :root{--pad:22px}
  .header-inner{gap:12px}
  .logo-mark{width:41px;height:41px}
  .logo-text{font-size:1.1rem}
  .hero-caption{padding:104px var(--pad) 88px}
  .section{padding:64px 0}
  .card-body{padding:23px}
  .cta-tile{padding:34px 26px}
  .contact-panel{padding:36px 24px}
  .copyright .container{flex-direction:column;text-align:center}
}