/* ================================================================
   Shared CSS — replicates clevay.com layout system
   All pages reference this file
   ================================================================ */

/* ========== Google Fonts ==========
   Manrope      — 现代 grotesque，几何感强，作为站点英文字体（参考 Agency 设计语言）
   Inter        — 仅作 fallback
   Noto Sans SC — 思源黑体，匹配中文
   Weight range: 300 (light) / 400 (regular) / 500 (medium) / 600 (semibold) / 700 (bold)
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');

/* ========== Reset ========== */
*, *::before, *::after {
   margin:0; padding:0; border:0; font-size:100%; font:inherit;
   vertical-align:baseline; -webkit-box-sizing:border-box; box-sizing:border-box;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
body { line-height:1; letter-spacing:0; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
table { border-collapse:collapse; border-spacing:0; }
a { text-decoration:none; color:inherit; }
b,strong { font-weight:700; }

/* ========== Type Scale ========== */
:root {
   /* ——— Font stack (2x4.org grotesque style) ——————————————
      English: Inter → Helvetica Neue (ag-book fallback) → Arial
      Chinese: Noto Sans SC → PingFang SC → Microsoft YaHei
      All headings & body share the same grotesque family
   ————————————————————————————————————————————————————————— */
   --font-display: 'Manrope', 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
   --font-body:    'Manrope', 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
   --font-primary: var(--font-display);

   --text-base-size: 1.100vw;
   --text-scale-ratio: 1.3375;
   --text-xs: calc(1em / (var(--text-scale-ratio) * var(--text-scale-ratio)));
   --text-sm: calc(1em / var(--text-scale-ratio));
   --text-md: calc(1em * var(--text-scale-ratio));
   --text-lg: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio));
   --text-xl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
   --text-xxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
   --text-xxxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
   --heading-line-height: 1.05;
   --body-line-height: 1.3;
}
@media (max-width:1440px){ :root{ --text-base-size:1.25em; --text-scale-ratio:1.25; } }
@media (max-width:992px){  :root{ --text-base-size:1.25em; --text-scale-ratio:1.25; } }
@media (max-width:768px){  :root{ --text-base-size:1.125em; --text-scale-ratio:1.25; } }
@media (max-width:520px){  :root{ --text-base-size:1.125em; --text-scale-ratio:1.125; } }

body {
   font-size: var(--text-base-size);
   font-family: var(--font-body);
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
/* All headings use grotesque — matching 2x4.org ag-book weight hierarchy */
h1, h2, h3, .h-serif, .text--xxxl {
   font-family: var(--font-display);
   letter-spacing: -0.01em;
   line-height: var(--heading-line-height);
   font-weight: 600;
}
h1 { font-size: var(--text-xxl); font-weight: 600; }
h2 { font-size: var(--text-xl); font-weight: 600; }
h3 { font-size: var(--text-lg); font-weight: 500; }
.text--xxxl { font-size: var(--text-xxxl); font-family: var(--font-display); font-weight: 600; }
h4 {
   font-size: var(--text-md);
   margin-top: 0.75em;
   font-family: var(--font-body);
   font-weight: 500;
   letter-spacing: 0.01em;
}
h5 { font-size: var(--text-base-size); font-family: var(--font-body); font-weight: 500; }
p  { line-height: var(--body-line-height); margin-bottom: 1.2em; }
p:last-child { margin-bottom: 0; }

/* ========== Themes ========== */
.theme--black { background-color:#000; color:#fff; }
.theme--white { background-color:#fff; color:#000; }

/* ========== 12-Col Grid ========== */
:root {
   --width-1:8.33%; --width-2:16.66%; --width-3:25%; --width-4:33.33%;
   --width-5:41.66%; --width-6:50%; --width-7:58.33%; --width-8:66.66%;
   --width-9:75%; --width-10:83.33%; --width-11:91.66%; --width-12:100%;
}
.col-1{width:var(--width-1)} .col-2{width:var(--width-2)} .col-3{width:var(--width-3)}
.col-4{width:var(--width-4)} .col-5{width:var(--width-5)} .col-6{width:var(--width-6)}
.col-7{width:var(--width-7)} .col-8{width:var(--width-8)} .col-9{width:var(--width-9)}
.col-10{width:var(--width-10)} .col-11{width:var(--width-11)} .col-12{width:var(--width-12)}
.offset-1{margin-left:var(--width-1)} .offset-2{margin-left:var(--width-2)}
.offset-3{margin-left:var(--width-3)} .offset-4{margin-left:var(--width-4)}
.offset-5{margin-left:var(--width-5)} .offset-6{margin-left:var(--width-6)}
.offset-7{margin-left:var(--width-7)}

.col-wrap { padding-left:6px; padding-right:6px; }
.col-wrap::after { content:""; visibility:hidden; display:block; height:0; clear:both; }
.col-wrap [class*="col-"] { float:left; padding-left:6px; padding-right:6px; }
.col-wrap.inner { padding-left:0; padding-right:0; }
.col-wrap.inner [class*="col-"]:first-child { padding-left:0; }
.col-wrap.inner [class*="col-"]:last-child { padding-right:0; }

@media (max-width:768px){
   .col-wrap{ padding-left:3px; padding-right:3px; }
   .col-wrap [class*="col-"]{ padding-left:3px; padding-right:3px; }
}
@media (max-width:520px){ .fill-xs,[class*="col-"].fill-xs{ width:100%; margin-left:0%; } }
@media (max-width:768px){ .fill-sm,[class*="col-"].fill-sm{ width:100%; margin-left:0%; } }
@media (max-width:992px){
   .fill-md,[class*="col-"].fill-md{ width:100%; margin-left:0%; }
   .half-md,[class*="col-"].half-md{ width:50%; margin-left:0%; }
}

/* ========== Spacing ========== */
:root {
   --space-unit:1em;
   --space-xxs:calc(0.25*var(--space-unit));
   --space-xs:calc(0.5*var(--space-unit));
   --space-sm:calc(0.75*var(--space-unit));
   --space-md:calc(1.25*var(--space-unit));
   --space-lg:calc(2*var(--space-unit));
   --space-xl:calc(3*var(--space-unit));
   --space-xxl:calc(3.6*var(--space-unit));
}
@media (max-width:992px){ :root{ --space-unit:1em; } }

.margin-top--sm{margin-top:var(--space-sm)} .margin-top--lg{margin-top:var(--space-lg)}
.margin-top--xl{margin-top:var(--space-xl)} .margin-top--xxl{margin-top:var(--space-xxl)}
.margin-bottom--sm{margin-bottom:var(--space-sm)}
.margin-bottom--lg{margin-bottom:var(--space-lg)}
.margin-bottom--xl{margin-bottom:var(--space-xl)}
.margin-bottom--xxl{margin-bottom:var(--space-xxl)}
.padding-top--sm{padding-top:var(--space-sm)}
.padding-top--xl{padding-top:var(--space-xl)}
.padding-top--xxl{padding-top:var(--space-xxl)}
.padding-bottom--sm{padding-bottom:var(--space-sm)}
.padding-bottom--xl{padding-bottom:var(--space-xl)}
.padding-bottom--xxl{padding-bottom:var(--space-xxl)}
@media (max-width:992px){
   .padding-top--xl{padding-top:var(--space-lg)}
   .padding-top--xxl{padding-top:var(--space-xl)}
   .padding-bottom--xl{padding-bottom:var(--space-lg)}
   .padding-bottom--xxl{padding-bottom:var(--space-xl)}
   .margin-bottom--xl{margin-bottom:var(--space-lg)}
   .margin-bottom--xxl{margin-bottom:var(--space-xl)}
}

/* ========== Utilities ========== */
.opacity-hover:hover { opacity:0.5; }
.opacity { opacity:0.5; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.clear-after::after { content:""; display:table; clear:both; }
*::selection { background:#2326f7; }
*::-moz-selection { background:#2326f7; }
.largetext { font-size:2em; }
.bodytext-spacing-top { margin-top:0.125rem; }
.bodytext-spacing-bottom { margin-bottom:0.3125rem; }
@media (max-width:768px){
   .bodytext-spacing-top{ margin-top:0.1875rem !important; }
   .bodytext-spacing-bottom{ margin-bottom:0.375rem !important; }
}

/* ========== Layout ========== */
#container { width:100%; }
#main-content.nospace { padding-top:0; }
.content__row { margin-bottom:0; }
.content__row:last-child { margin-bottom:0; }
.content__row.text-margin { margin-bottom:1.2em; }
.content__row.default-margin { margin-bottom:0.75rem; }
@media (max-width:768px){ .content__row.default-margin{ margin-bottom:0.375rem; } }

/* ========== Image / Video Frames ========== */
.image-frame { overflow:hidden; position:relative; }
.image-frame img { float:left; width:100%; opacity:1; position:relative; z-index:1; }
/* 洞察动态封面支持视频 / GIF，与 img 同样的表现 */
.image-frame video { float:left; width:100%; opacity:1; position:relative; z-index:1; display:block; background:#eee; }
.video-frame { position:relative; overflow:hidden; }
.video-frame video { width:100%; height:100%; float:left; outline:none; }
.ratio3x2 { aspect-ratio:3/2; object-fit:cover; }
.ratio2x3 { aspect-ratio:2/3; object-fit:cover; }
.ratio16x9 { aspect-ratio:16/9; object-fit:cover; }
.ratio1x1 { aspect-ratio:1/1; object-fit:cover; background-color:#eee; }
.ratio3x4 { aspect-ratio:3/4; object-fit:cover; }

/* ========== Header ========== */
.header {
   margin-top:0.5rem; position:fixed; top:0; left:0; z-index:8;
   width:100%; mix-blend-mode:exclusion; color:#fff;
}
/* Logo text is authored per-page in the anchor itself. */
.header__content__navigation ul li { float:left; margin-right:1.2em; }
.header__content__navigation ul li:last-child { margin-right:0; }
@media (max-width:768px){ .header__content__navigation{ display:none; } }
.header__content__menu-trigger { display:none; }
@media (max-width:768px){ .header__content__menu-trigger{ display:block; } }
.header__content__menu-trigger a::after { content:"Menu"; }
.logowhite { height:39px; filter: invert(1); }                  /* 父层 header 使用 mix-blend-mode:exclusion，黑底 logo 会与背景同色隐形 → 始终反色为白后参与排除混合，在任何底色下都能看见 */
body.theme--black .logowhite { filter: invert(1) brightness(1.1); }
.logoright { text-align:right; }
.header__content__navigation:not(.logoright) { padding-top:0.5em; }

/* ========== Site Logo (TOCREATE.) ========== */
.header__content__logo { padding-top:10px; }
.header__content__logo a {
   font-family: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
   font-weight: 800;
   font-size: 1.6rem;
   letter-spacing: -0.02em;
   line-height: 1;
   color: #fff;
   text-transform: none;
}

/* ========== Cycling Headline (TO SEE./THINK./CREATE.) ========== */
.typing-headline {
   font-size: 15.5vw; line-height: 1; font-weight: 400;
   margin: 0; letter-spacing: -0.02em;
   white-space: nowrap;
}
.typing-headline .static,
.typing-headline .eng { color: #111; }
.typing-headline .cn {
   color: #b8b8b8; font-weight: 300;
   font-size: 4.8vw;
   margin-left: 14.8vw;
   display: inline-block;
   vertical-align: top;
   margin-top: 1vw;
   line-height: 1;
}
.typing-headline .cycled { transition: opacity 0.4s ease; }
.typing-headline .cycled.fading { opacity: 0; }
@media (max-width:768px){
   .typing-headline  { font-size: 13vw; }
   .typing-headline .cn { font-size: 4vw; margin-left: 12vw; margin-top: 0.8vw; }
}

/* ========== Works page headline — larger hero ========== */
main.theme--white .typing-headline {
   font-size: 14vw;
}
main.theme--white .typing-headline .cn {
   font-size: 3.8vw;
   margin-left: -0.15em;
   margin-top: 1vw;
}
@media (max-width:768px){
   main.theme--white .typing-headline { font-size: calc((100vw - 12px) / 5.4); }
   main.theme--white .typing-headline > #cycled { display: contents; }
   main.theme--white .typing-headline .eng { font-size: calc((100vw - 12px) / 5.4); }
   main.theme--white .typing-headline .cn {
      display: block;
      text-align: right;
      font-size: calc((100vw - 12px) / 12);
      margin-left: 0;
      margin-top: 0.2em;
   }
}

/* ========== Homepage (黑底) — 标题白字 + 中英文同高，匹配 RDA 参考 ========== */
main.theme--black .typing-headline {
   color: #fff;
   white-space: nowrap;
}
main.theme--black .typing-headline > #cycled { display: contents; }
main.theme--black .typing-headline .static {
   color: #fff;
   font-size: 5.5vw;
   font-weight: 400;
   line-height: 1;
   letter-spacing: -0.02em;
}
main.theme--black .typing-headline .eng {
   color: #14ffc4;
   font-size: 5.5vw;
   font-weight: 400;
   line-height: 1;
   letter-spacing: -0.02em;
}
main.theme--black .typing-headline .cn {
   color: #fff;
   font-size: 4.5vw;
   font-weight: 300;
   line-height: 1;
   margin-left: 0.4em;
   margin-top: 0;
   vertical-align: top;
}
@media (max-width:768px){
   main.theme--black .typing-headline .static,
   main.theme--black .typing-headline .eng { font-size: calc((100vw - 12px) / 5.4); }
   main.theme--black .typing-headline .cn { font-size: 7.4vw; }
}

/* ========== Homepage (黑底) — 打字机光标 ========== */
/* 用 ::after 在 .eng 后面挂闪烁光标，首页打字机模式下显示 */
main.theme--black .typing-headline.with-cursor .eng::after {
   content: '';
   display: inline-block;
   width: 0.08em;
   height: 0.88em;
   margin-left: 0.08em;
   background: currentColor;
   vertical-align: -0.05em;
   animation: cursorBlink 0.85s steps(1) infinite;
}
@keyframes cursorBlink {
   0%, 50%   { opacity: 1; }
   50.01%, 100% { opacity: 0; }
}
/* ========== Homepage intro paragraph — 黑底轻盈 RDA 风格 ========== */
main.theme--black .homepage-tagline.col-5.offset-6 h4 {
   color: rgba(255,255,255,0.82);
   font-weight: 400;
   line-height: 1.55;
   letter-spacing: 0;
   margin-top: 0;
}

/* ========== Mobile menu (RDA 风格: 黑底 + 居中菜单 + 圆形反白logo) ========== */
.mobile-menu {
   position: fixed; inset: 0; z-index: 9;
   width: 100%; height: 100vh; min-height: 100dvh;
   background-color: #000;
   color: #fff;
   display: flex; flex-direction: column;
   padding: clamp(20px, 4vw, 36px) clamp(24px, 5vw, 44px);
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   opacity: 0; visibility: hidden;
   transform: translateY(-12px);
   transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.mobile-menu.is-open {
   opacity: 1; visibility: visible; transform: translateY(0);
   transition: opacity .35s ease, transform .35s ease, visibility 0s;
}
@media (min-width: 769px) {
   .mobile-menu { display: none !important; }
}
.mobile-menu__bar {
   display: flex; justify-content: space-between; align-items: center;
   font-size: 1.05rem; font-weight: 600;
   letter-spacing: -0.01em;
}
.mobile-menu__logo {
   position: absolute; left: 50%; top: clamp(20px, 4vw, 36px);
   transform: translateX(-50%);
   display: flex; align-items: center; justify-content: center;
}
.mobile-menu__logo img {
   display: block;
   width: clamp(64px, 14vw, 100px);
   height: clamp(64px, 14vw, 100px);
   object-fit: contain;
}
.mobile-menu__close {
   color: #fff; cursor: pointer; user-select: none;
   font-weight: 500; letter-spacing: 0.01em;
   margin-left: auto;
}
.mobile-menu__close:hover { opacity: .7; }
.mobile-menu__nav {
   margin-top: clamp(60px, 14vw, 110px);
   flex: 0 0 auto;
   width: 100%;
   text-align: center;
}
.mobile-menu__nav ul { list-style: none; padding: 0; margin: 0; }
.mobile-menu__nav li {
   font-size: clamp(34px, 9vw, 56px);
   line-height: 2;
   font-weight: 300;
   letter-spacing: -0.02em;
}
.mobile-menu__nav a {
   color: #fff; display: inline-block;
   transition: opacity .2s ease;
}
.mobile-menu__nav a:hover { opacity: .6; }

/* 移动端抽屉菜单：行距加大 2 倍（line-height: 2 → 4） */
@media (max-width:768px){
   .mobile-menu__nav li { line-height: 4; }
}

/* ========== Page Title ========== */
@media (max-width:768px){ .page-title{ width:83.33%; margin-left:16.66%; } }

/* ========== Hero / Homepage Top ========== */
.homepage-top {
   position:relative; height:100vh; overflow:hidden;
   background-color:#000; margin-bottom:0.75rem;
}
.homepage-top.dark-top { background-color:#fff; }
.homepage-top.dark-top .homepage-top__text { color:#000; }
.homepage-top.light-top { background-color:#000; }
@media (max-width:768px){ .homepage-top{ margin-bottom:0.375rem; height:100vw; } }
.homepage-top__text { position:absolute; z-index:2; bottom:0; color:#fff; width:100%; margin-bottom:0.5rem; }
.homepage-top__video-wrap { overflow:hidden; width:100%; height:100%; position:relative; }
.homepage-top__video-wrap video {
   position:absolute; top:50%; left:50%;
   transform:translateX(-50%) translateY(-50%);
   min-width:100%; min-height:100%; width:auto; height:auto; z-index:0; overflow:hidden;
}
.homepage-top__video-wrap iframe {
   position:absolute; top:0; left:0; width:100%; height:100%;
   border:0; overflow:hidden; z-index:0; background:#000;
}
.homepage-tagline { padding-bottom:13.5rem; }
@media (max-width:1280px){ .homepage-tagline{ padding-bottom:9rem; } }
@media (max-width:768px){ .homepage-tagline{ padding-bottom:4.5rem; } }
.homepage-tagline h1 { font-size:80px; }

/* ========== Homepage Entry (project cards) ========== */
.homepage-entry h3 {
   margin-top:0.5rem; font-size:var(--text-lg); font-weight:500 !important;
   line-height:1.1; letter-spacing:-0.01em;
   font-family: var(--font-primary);
}
.homepage-entry h3 span { display:inline; }
.homepage-entry h3 span:last-child { opacity:0.3; }
.entry-type { display:none; }
.content__row__entry__title { font-size:calc(var(--text-lg) * 0.5625); font-weight:400; line-height:1.1; letter-spacing:-0.01em; font-family:var(--font-primary); }
.content__row__entry__info { width:100%; font-size:0.8em; font-weight:700; margin-top:0.45em; letter-spacing:0.02em; font-family:var(--font-primary); color:#9a9a9a; }

/* 作品栏目（works.html）移动端：标题 ×2.5、英文 ×2 + 浅灰（同时作用于默认 #mainGrid 和筛选 #filteredGrid） */
@media (max-width:768px){
   #mainGrid .content__row__entry__title,
   #filteredGrid .content__row__entry__title {
      font-size: calc(var(--text-lg) * 1.40625);   /* 标题 ×2.5（约 39px，桌面端 0.5625× → 0.5625×2.5=1.40625） */
   }
   #mainGrid .content__row__entry__info,
   #filteredGrid .content__row__entry__info {
      font-size: 1.6em;                             /* 英文 ×2（桌面 0.8em → 1.6em） */
      color: #b8b8b8;                               /* 变浅一点的灰（原 #9a9a9a） */
      font-weight: 600;
      margin-top: 5px;                             /* 下移 5px（相对默认位置） */
   }
}

/* ========== Content Row Layout Items ========== */
.content__row__layout__item.item-size-2 { width:calc(50% - 0.375rem); float:left; }
.content__row__layout__item.item-size-2:first-child { margin-right:0.375rem; }
.content__row__layout__item.item-size-2:last-child { margin-left:0.375rem; }
@media (max-width:768px){
   .content__row__layout__item.item-size-2{ width:calc(50% - 0.1875rem); }
   .content__row__layout__item.item-size-2:first-child{ margin-right:0.1875rem; }
   .content__row__layout__item.item-size-2:last-child{ margin-left:0.1875rem; }
}

/* ========== Grid (news) ========== */
.grid { display:grid; grid-gap:4.5rem 0rem; grid-template-columns:repeat(auto-fill, minmax(25%, 1fr)); }
.grid.wide-grid { grid-template-columns:repeat(auto-fill, minmax(16.66%, 1fr)); }
@media (max-width:1440px){ .grid{ grid-template-columns:repeat(auto-fill, minmax(25%, 1fr)); } }
@media (max-width:992px){ .grid{ grid-gap:3.75rem 0rem; } }
@media (max-width:768px){
   .grid{ grid-gap:3.375rem 0rem; grid-template-columns:repeat(auto-fill, minmax(100%, 1fr)); }
}
.news-article__category { margin-top:0.25em; opacity:0.5; font-size:0.8em; }

/* ========== Activity 栏目（活动 / 报道 文字列表） ========== */
.activity-section { margin-top:6rem; border-top:1px solid #000; position:relative; }
.activity__header {
   display:flex; justify-content:space-between; align-items:flex-start;
   padding-top:1.5rem; padding-bottom:0.5rem;
}
.activity__title {
   position:absolute; left:12px; top:1.5rem;
   margin:0; font-size:1.6em; font-weight:600; letter-spacing:0.04em;
   color:#000; line-height:1.2;
}
.activity__categories {
   list-style:none; margin:0; padding:0; text-align:left;
}
.activity__categories li { line-height:1.9; display:flex; align-items:center; }
.activity__categories a {
   color:#000; text-decoration:none; opacity:0.45;
   font-size:0.85em; letter-spacing:0.02em; transition:opacity 0.18s;
}
.activity__categories a:hover { opacity:0.85; }
.activity__categories a.active { opacity:1; }
.activity__dot {
   display:inline-block; width:0.55em; height:0.55em;
   background:transparent;            /* 透明占位 —— 两个分类始终对齐 */
   border:1px solid currentColor;     /* 描边方块，未激活时呈描边状态 */
   margin-right:0.45em; flex-shrink:0;
   box-sizing:border-box;
   vertical-align:middle;
}
.activity__categories a.active .activity__dot {
   background:#000;                   /* 激活时填充黑色 */
   border-color:#000;
}
.activity__list {
   list-style:none; margin:2.5rem 0 0 0; padding:0; border-top:1px solid #000;
}
.activity__item {
   display:flex; justify-content:space-between; align-items:flex-start;
   border-bottom:1px solid #000; padding:1.05em 0;
}
.activity__link {
   display:inline-block; color:#000; text-decoration:none;
   font-size:0.95em; line-height:1.5; letter-spacing:0.01em;
   transition:opacity 0.18s;
}
.activity__link:hover { opacity:0.6; }
.activity__headline { font-weight:300; }
.activity__date {
   font-size:0.8em; opacity:0.55; line-height:1.5; padding-top:0.1em;
   white-space:nowrap; flex-shrink:0;
}
@media (max-width:768px){
   .activity__title { position:static; left:auto; }
   .activity__header { flex-direction:column; gap:0.6rem; }
   .activity__categories { text-align:left; }
   .activity__item { flex-direction:column; gap:0.2em; }
}

/* ========== Service List (expertise) ========== */
.service-list-item {
   border-top:1px solid #000; padding:10px 0;
   font-size:1.15em; line-height:1.15; cursor:default;
   transition:background-color 0.2s ease, color 0.2s ease;
}
.service-list-item:last-child { border-bottom:1px solid #000; }
.service-list-item:hover { background-color:#000; color:#fff; }

/* ========== Footer Marquee ========== */
.footer-marquee {
   overflow:hidden; white-space:nowrap; font-size:18.5vw; line-height:1;
   font-family: var(--font-display); font-weight: 600;
}
.footer-marquee__track {
   display:inline-flex; width:max-content;
   animation:footerMarquee 18s linear infinite; will-change:transform;
}
.footer-marquee__item { display:inline-flex; align-items:center; padding-right:0.08em; }
@keyframes footerMarquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ========== Footer ========== */
.footer { padding-top:0.5rem; }
@media (max-width:768px){ .footer{ padding-top:0.25rem; } }
.text-container p { margin-bottom:1.2em; }
.text-container p:last-child { margin-bottom:0; }
.text-container a { border-bottom:1px solid; }
.text-container .empty { display:none; }

/* ========== Reveal Animation ========== */
.reveal {
   opacity:0; transform:translateY(20px);
   transition:opacity 0.8s cubic-bezier(0.35,1,0.5,1), transform 0.8s cubic-bezier(0.35,1,0.5,1);
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ========== Filter Bar (works page) — 默认折叠 + 字号统一 ========== */
.filter-bar { padding:0 0 1em 0; display:flex; flex-direction:column; gap:0.35em 0; }
.filter-group { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 1.6em; }

/* 折叠触发器：label + +/−，字号与选项按钮一致 */
.filter-trigger {
   display:inline-flex; align-items:baseline; gap:0.55em;
   background:none; border:none; padding:0; margin:0; cursor:pointer;
   font-family:var(--font-body); font-size:0.78em;
   color:#080808; letter-spacing:0.02em; line-height:1.2;
   outline:none; transition:opacity 0.18s;
   vertical-align:baseline;
}
.filter-trigger:hover { opacity:0.65; }
.filter-trigger .filter-label { font-weight:400; }
.filter-trigger .filter-toggle {
   display:inline-block; color:#00C9A7; font-weight:300;
   font-size:1em; line-height:1; vertical-align:baseline;
}
/* 折叠态：显示 +；展开态：显示 ×（不旋转，避免与原 × 重复） */
.filter-trigger .filter-toggle--arrow { display:inline-block; }
.filter-trigger .filter-toggle--close { display:none; }
.filter-group.is-open .filter-trigger .filter-toggle--arrow { display:none; }
.filter-group.is-open .filter-trigger .filter-toggle--close { display:inline-block; }

/* 展开后选项与 trigger 同行 */
.filter-options {
   display:none; flex-wrap:nowrap; align-items:baseline;
   margin:0; gap:0 1.8em; white-space:nowrap;
}
.filter-group.is-open .filter-options { display:inline-flex; }

.filter-btn {
   display:inline-block; background:none; border:none; padding:0;
   margin:0; color:#080808; font-size:0.78em; font-family:var(--font-body);
   letter-spacing:0.02em; line-height:1.2; cursor:pointer; outline:none;
   text-decoration:none; opacity:0.45; transition:opacity 0.18s; white-space:nowrap;
   vertical-align:baseline;
}
.filter-btn:hover { opacity:1; }
.filter-btn.active { opacity:1; color:#00C9A7; }
#filteredGrid { display:none; }
#filteredGrid.is-active { display:block; }
#filteredGrid .content__row__entry { --stagger:0ms; opacity:1; transform:none; }
.homepage-content.is-filtered { display:none; }
#filteredGrid .content__row__entry {
   opacity:0; transform:translateY(10px);
   animation:entryFadeIn 0.38s ease forwards; animation-delay:var(--stagger, 0ms);
}
@keyframes entryFadeIn { to{opacity:1; transform:translateY(0)} }

/* ========== Hero Title (about page) ========== */
.hero-title { padding-top:5rem; padding-bottom:1.5rem; }
.hero-title h1 { font-size:var(--text-xxl); }
@media (max-width:768px){ .hero-title{ padding-top:3.5rem; } }

/* ========== Image Big Title (about page office labels) ========== */
.img-big-title {
   position:absolute; bottom:0; left:0; z-index:2;
   color:#fff; padding:0 0 0.25rem 0.25rem; font-size:var(--text-xxl);
   mix-blend-mode:exclusion;
}

/* ========== Mobile Overrides ========== */
@media (max-width:768px){
   html, body, #container, #main-content { width:100%; max-width:100%; overflow-x:hidden; }
   .content__row > [class*="col-"] { width:100%; }
   .content__row .empty { display:none; }
   .expertise-absolute-copy { width:auto; margin-left:0; }
}