/* ==================================================================
 * SIXEIT 主题样式 v0.1  —  视觉基线（骨架）
 *
 * 命名规范：HEADLESS-TO-WP.md §3  sx- 分层 BEM v2
 *   sx-l- 布局 / sx-b- ACF 块 / sx-c- 组件 / sx-u- 工具
 *   is- / has- 状态（必须组合使用）  ·  js- 只作 JS 钩子（禁止出现在本文件选择器中）
 *
 * 重要：本文件是「视觉等效重制」(D1) 的骨架层，不是源站 CSS 的最终搬运结果。
 * Phase C 由 rewrite_css.py 依据冻结 CSS chunk 生成 assets/css/humaan-mapped.css
 * （带 E2/E3 指纹报告），存在时由 functions.php 自动入队并覆盖本文件的视觉细节。
 * Phase B：色板与字体按源站做视觉对齐（临时内部演示素材，用户后续整体换牌）。
 * 取证见 audit/phase-b-palette.json；字体见 assets/css/sixeit-fonts.css。
 * 源站无单一主色（83+ 个 hex 多为 work 卡各自主题色，已原样保留在
 * humaan-mapped.css 声明体内），此处只取全局基础色，不做局部色全局化。
 * ================================================================== */

:root {
    --sx-ink:        #122a2a;                  /* 源站高频深色 24 次 */
    --sx-ink-soft:   #556464;                  /* 源站无独立 soft 值，固定派生常量 */
    --sx-bg:         #ecfffc;                  /* 源站浅底 24 次 */
    --sx-surface:    #ffffff;                  /* 源站最高频 90 次，保持不动 */
    --sx-line:       rgba(18, 42, 42, .12);    /* 由 ink 派生 */
    --sx-accent:     #122a2a;                  /* 替换占位紫 #6b4eff */
    --sx-drawer-bg:  #21293a;                  /* A 组已验收的移动端抽屉色，保持不动 */
    --font-neue-montreal: neueMontreal, 'neueMontreal Fallback';
    --sx-font:       var(--font-neue-montreal), 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --sx-container:  1280px;
    --sx-container-wide: 1560px;
    --sx-ease:       cubic-bezier(.22, .7, .18, 1);
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.sx-l-page {
    margin: 0;
    background: var(--sx-bg);
    color: var(--sx-ink);
    font-family: var(--sx-font);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--sx-accent); outline-offset: 4px; }

/* Lenis 官方配套样式（第三方类名，不属于 sx- 命名空间） */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- utilities ---------- */
.sx-u-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sx-u-nowrap { white-space: nowrap; }

/* ---------- layout ---------- */
.sx-l-page { min-height: 100vh; display: flex; flex-direction: column; }
.sx-l-main { flex: 1 0 auto; }
.sx-l-container { width: 100%; max-width: var(--sx-container); margin-inline: auto; padding-inline: clamp(20px, 5vw, 72px); }
.sx-l-container--wide { max-width: var(--sx-container-wide); }
.sx-l-container--narrow { max-width: 900px; }
.sx-l-section { padding-block: clamp(64px, 9vw, 150px); position: relative; }
.sx-l-section--flush { padding-block: 0; overflow: hidden; }
.sx-l-grid { display: grid; gap: clamp(16px, 2.4vw, 36px); }
.sx-l-grid--work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-l-grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-l-grid--feed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-l-archive__title { font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 700; letter-spacing: -.04em; padding-block: 100px 40px; }

/* ---------- header ---------- */
.sx-l-header {
    position: relative;
    z-index: 110;
    background: var(--sx-bg);
    border-bottom: 1px solid var(--sx-line);
}
.sx-l-header__inner {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.sx-l-drawer { display: flex; align-items: center; }

/* ---------- footer ---------- */
.sx-l-footer { background: var(--sx-drawer-bg); color: #fff; padding-block: 72px 40px; }
.sx-l-footer__inner { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: start; }
.sx-l-footer__tagline { color: #b9bfd0; font-size: .9rem; margin-top: 12px; }
.sx-l-footer__nav .sx-c-nav__list { display: flex; gap: 24px; flex-wrap: wrap; }
.sx-l-footer__nav a:hover { color: var(--sx-accent); }
.sx-l-footer__copy { grid-column: 1 / -1; color: #8b93a8; font-size: .82rem; border-top: 1px solid rgba(255,255,255,.14); padding-top: 24px; }

/* ---------- components: brand / nav ---------- */
.sx-c-brand { display: inline-flex; align-items: center; }
.sx-c-brand__mark { font-weight: 800; font-size: 1.3rem; letter-spacing: -.05em; }
.sx-c-nav__list { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px); }
.sx-c-nav__item { position: relative; }
.sx-c-nav__link, .sx-c-nav__item > a {
    display: inline-block; padding: 10px 0; font-size: .92rem; font-weight: 500;
    transition: color .25s var(--sx-ease);
}
.sx-c-nav__item > a:hover { color: var(--sx-accent); }
.sx-c-nav__sub-list, .sub-menu { display: none; }
/* 桌面端：hover / 键盘聚焦时展开下拉（移动端走抽屉内的手风琴，见 @media 段） */
@media (min-width: 40.001rem) {
    .sx-c-nav__item:hover > .sub-menu,
    .sx-c-nav__item:focus-within > .sub-menu {
        display: block;
        position: absolute;
        top: 100%; left: 0;
        min-width: 220px;
        padding: 8px 0;
        background: var(--sx-surface);
        border: 1px solid var(--sx-line);
        box-shadow: 0 14px 34px rgba(16, 16, 20, .1);
        z-index: 120;
    }
    .sub-menu .sx-c-nav__item > a,
    .sub-menu .sx-c-nav__link { display: block; padding: 8px 18px; font-size: .88rem; }
}
.sx-c-nav__hint { font-size: .82rem; color: var(--sx-ink-soft); }
body.has-overlay { overflow: hidden; }
.sx-c-nav-toggle { display: none; background: none; border: 0; padding: 10px; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 5px; }
.sx-c-nav-toggle__bar { display: block; width: 24px; height: 2px; background: var(--sx-ink); transition: transform .3s var(--sx-ease), opacity .2s linear; }

/* 汉堡 → X（对齐源站 is-open 状态） */
body.is-open .sx-c-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.is-open .sx-c-nav-toggle__bar:nth-child(2) { opacity: 0; }
body.is-open .sx-c-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- components: button / media / prose / card / marquee ---------- */
.sx-c-button {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 28px; border-radius: 100px; border: 1px solid var(--sx-ink);
    font-size: .9rem; font-weight: 600; letter-spacing: .01em;
    background: transparent; transition: background .25s var(--sx-ease), color .25s var(--sx-ease), transform .25s var(--sx-ease);
}
.sx-c-button:hover { background: var(--sx-ink); color: #fff; transform: translateY(-2px); }
.sx-c-button--accent { background: var(--sx-accent); border-color: var(--sx-accent); color: #fff; }
.sx-c-button--accent:hover { background: var(--sx-ink); border-color: var(--sx-ink); }

.sx-c-media { overflow: hidden; }
.sx-c-media__img { width: 100%; height: 100%; object-fit: cover; }
.sx-c-prose { font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.75; color: var(--sx-ink-soft); }
.sx-c-prose > * + * { margin-top: 1.1em; }
.sx-c-prose a { text-decoration: underline; text-underline-offset: 4px; }

.sx-c-work-card__link { display: block; }
.sx-c-work-card__media {
    position: relative; display: block; aspect-ratio: 4 / 3; background: #e9e7e0; overflow: hidden; border-radius: 2px;
}
.sx-c-work-card__media .sx-c-media__img { transition: transform .6s var(--sx-ease); }
/* 源站 work-card__video：视频铺满封面位，与静态图共用 hover 缩放（D1 视觉等效） */
.sx-c-work-card__video {
    position: absolute; inset: 0; display: block; width: 100%; height: 100%;
    object-fit: cover; transition: transform .6s var(--sx-ease);
}
.sx-c-work-card__link:hover .sx-c-media__img,
.sx-c-work-card__link:hover .sx-c-work-card__video { transform: scale(1.045); }
.sx-c-work-card__title { display: block; margin-top: 16px; font-size: 1.1rem; font-weight: 600; }
.sx-c-pagination { display: flex; gap: 10px; justify-content: center; padding: 40px 0; }

.sx-c-marquee { overflow: hidden; }
.sx-c-marquee__track {
    display: flex; width: max-content; gap: 2.4rem; flex-wrap: nowrap;
    animation: sx-marquee var(--sx-marquee-duration, 20s) linear infinite;
}
@keyframes sx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sx-c-split-word { display: inline-block; will-change: transform, opacity; }

.sx-c-pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--sx-line); }
.sx-c-modal {
    position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
    background: rgba(10, 10, 14, .88); padding: 5vw;
}
.sx-c-modal__inner { width: min(1100px, 100%); aspect-ratio: 16 / 9; background: #000; position: relative; }
.sx-c-modal__inner iframe, .sx-c-modal__inner video { width: 100%; height: 100%; border: 0; }
.sx-c-modal__close {
    position: absolute; top: -44px; right: 0; background: none; border: 0; color: #fff; font-size: 2rem; line-height: 1;
}

/* ---------- components: 安装就绪占位（无 ACF 内容时） ---------- */
.sx-c-setup { padding-block: 100px; }
.sx-c-setup__title { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -.04em; }
.sx-c-setup__lead { margin-top: 16px; font-size: 1.05rem; color: var(--sx-ink-soft); }
.sx-c-setup__steps { margin-top: 32px; display: grid; gap: 12px; counter-reset: sx-step; }
.sx-c-setup__steps li { padding-left: 2em; position: relative; }
.sx-c-setup__steps li::before { counter-increment: sx-step; content: counter(sx-step) "."; position: absolute; left: 0; font-weight: 700; color: var(--sx-accent); }
.sx-c-setup__hint { margin-top: 24px; font-size: .86rem; color: var(--sx-ink-soft); }
.sx-c-setup__blocks { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.sx-c-setup__blocks li { padding: 10px 14px; background: var(--sx-surface); border: 1px solid var(--sx-line); font-size: .84rem; }
code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9em; }

/* ==================================================================
 * ACF 块样式（15 个 sx-b-* 根类由 inc/render-modules.php 按布局名推导）
 * ================================================================== */
.sx-b-hero { padding-top: clamp(90px, 14vw, 200px); }
.sx-b-hero__title { font-size: clamp(3rem, 9.5vw, 9rem); line-height: .98; font-weight: 700; letter-spacing: -.06em; }
.sx-b-hero__subhead { max-width: 620px; margin-top: 32px; font-size: clamp(1.1rem, 2vw, 1.6rem); color: var(--sx-ink-soft); }
.sx-b-hero__showreel { margin-top: 40px; }
.sx-b-hero__poster { margin-top: 80px; aspect-ratio: 16 / 8; border-radius: 2px; }

.sx-b-intro__body { padding-block: 40px; }
.sx-b-work-grid__title, .sx-b-logo-band__title { font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 600; letter-spacing: -.03em; margin-bottom: 48px; }

.sx-b-stats__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.sx-b-stats__item { border-top: 1px solid var(--sx-ink); padding-top: 20px; }
.sx-b-stats__value { font-size: clamp(3rem, 8vw, 7rem); font-weight: 700; line-height: 1; letter-spacing: -.06em; margin-top: 20px; }
.sx-b-stats__suffix { font-size: .5em; vertical-align: top; }
.sx-b-stats__label { font-size: .92rem; color: var(--sx-ink-soft); }

.sx-b-people__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 100px); align-items: center; }
.sx-b-people__title { font-size: clamp(2rem, 5vw, 4.4rem); line-height: 1.08; font-weight: 700; letter-spacing: -.05em; }
.sx-b-people__media { aspect-ratio: 4 / 5; border-radius: 2px; }

.sx-b-news-feed__item { border-top: 1px solid var(--sx-line); padding-top: 20px; }
.sx-b-news-feed__link { display: block; }
.sx-b-news-feed__link[aria-disabled="true"] { pointer-events: none; }
.sx-b-news-feed__media { display: block; aspect-ratio: 3 / 2; background: #e9e7e0; margin-bottom: 18px; }
.sx-b-news-feed__meta { display: flex; gap: 12px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sx-ink-soft); }
.sx-b-news-feed__title { display: block; margin-top: 10px; font-size: 1.15rem; font-weight: 600; line-height: 1.35; }
.sx-b-news-feed__link:hover .sx-b-news-feed__title { color: var(--sx-accent); }

.sx-b-cta { background: var(--sx-ink); color: #fff; }
.sx-b-cta__inner { display: flex; flex-wrap: wrap; gap: 32px; align-items: end; justify-content: space-between; }
.sx-b-cta__title { font-size: clamp(2.4rem, 7vw, 6.5rem); line-height: 1.02; font-weight: 700; letter-spacing: -.055em; max-width: 14ch; }
.sx-b-cta__button { flex: 0 0 auto; }
.sx-b-cta .sx-c-button { border-color: #fff; }
.sx-b-cta .sx-c-button:hover { background: #fff; color: var(--sx-ink); }

.sx-b-logo-band__list { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 5vw, 70px); }
.sx-b-logo-band__img { max-height: 56px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .7; transition: opacity .3s linear, filter .3s linear; }
.sx-b-logo-band__item:hover .sx-b-logo-band__img { opacity: 1; filter: none; }
.sx-b-logo-band__text { font-weight: 600; color: var(--sx-ink-soft); }
.sx-b-logo-band__viewport.sx-c-marquee .sx-b-logo-band__list { flex-wrap: nowrap; width: max-content; }

.sx-b-word-ticker { background: var(--sx-accent); color: #fff; }
.sx-b-word-ticker__marquee { padding-block: 28px; }
.sx-c-marquee__word { font-size: clamp(1.8rem, 5vw, 4rem); font-weight: 700; letter-spacing: -.04em; white-space: nowrap; }
.sx-b-word-ticker__link { display: block; }

.sx-b-work-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; padding-top: 90px; }
.sx-b-work-hero__sector { font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; color: var(--sx-ink-soft); }
.sx-b-work-hero__title { margin-top: 16px; font-size: clamp(3rem, 8vw, 7rem); line-height: 1; font-weight: 700; letter-spacing: -.06em; }
.sx-b-work-hero__copy .sx-c-button { margin-top: 36px; }
.sx-b-work-hero__media { aspect-ratio: 4 / 3; }

.sx-b-overview__body { padding-block: 40px; }
.sx-b-services__list { border-top: 1px solid var(--sx-line); }
.sx-b-services__item { display: flex; gap: 28px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--sx-line); }
.sx-b-services__index { font-size: .82rem; color: var(--sx-ink-soft); }
.sx-b-services__name { font-size: clamp(1.3rem, 3vw, 2.4rem); font-weight: 500; letter-spacing: -.03em; }

.sx-b-media-text__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.sx-b-media-text__inner--reverse .sx-b-media-text__media { order: 2; }
.sx-b-media-text__media { aspect-ratio: 4 / 3; }

.sx-b-awards__table th, .sx-b-awards__table td { text-align: left; padding: 18px 12px; border-bottom: 1px solid var(--sx-line); }
.sx-b-awards__table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--sx-ink-soft); }
.sx-b-awards__table td { font-size: 1.05rem; }

.sx-b-next-project__link { display: grid; gap: 8px; padding-block: 20px; border-top: 1px solid var(--sx-ink); }
.sx-b-next-project__label { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--sx-ink-soft); }
.sx-b-next-project__title { font-size: clamp(2.4rem, 7vw, 6rem); font-weight: 700; letter-spacing: -.055em; line-height: 1.05; }
.sx-b-next-project__media { display: block; aspect-ratio: 21 / 9; margin-top: 24px; }
.sx-b-next-project__link:hover .sx-b-next-project__title { color: var(--sx-accent); }

/* ==================================================================
 * 动效（D1 视觉等效重制）
 * 依赖 <html class="sx-js">：无 JS 时内容始终可见，不会被藏死。
 * 动效钩子是 data-sx-* / is-inview，不进组件类名。
 * ================================================================== */
.sx-js [data-sx-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity .8s var(--sx-ease), transform .8s var(--sx-ease);
}
.sx-js [data-sx-reveal].is-inview { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .sx-js [data-sx-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .sx-c-marquee__track { animation: none !important; }
    .sx-c-media__img, .sx-c-work-card__video, .sx-c-button { transition: none !important; }
    html.lenis, html.lenis body { scroll-behavior: auto !important; }
}

/* ==================================================================
 * 响应式：移动端 <40rem 深蓝左滑抽屉（复用新百安定稿交互）
 * 层级：顶栏 110 > 抽屉 100 > 页面内容；顶部留白避开固定顶栏。
 * ================================================================== */
@media (max-width: 40rem) {
    .sx-c-nav-toggle { display: flex; }
    .sx-l-header { position: sticky; top: 0; }
    .sx-l-drawer {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: 300px; max-width: 85vw;
        background: var(--sx-drawer-bg);
        z-index: 100;
        padding: 3.5rem 1em 1em;
        overflow-y: auto;
        display: block;
        transform: translateX(-100%);
        transition: transform 300ms ease;
        box-shadow: -25px 0 20px -20px #000 inset;
    }
    body.is-open .sx-l-drawer { transform: translateX(0); }
    body.is-open .sx-l-header { background: #fff; }
    .sx-l-drawer .sx-c-nav__list,
    .sx-l-drawer .sx-c-nav__list--footer { display: block; }
    .sx-l-drawer .sx-c-nav__item { border-bottom: 1px solid rgba(255,255,255,.12); }
    .sx-l-drawer .sx-c-nav__item > a { display: block; color: #fff; padding: .85em 0; font-weight: 600; }
    .sx-l-drawer .sx-c-nav__item > a:hover { color: #1dbfea; }
    .sx-l-drawer .sub-menu { display: none; padding-left: 1em; }
    .sx-l-drawer .menu-item-has-children.is-open > .sub-menu { display: block; }
    .sx-l-drawer .sub-menu a { display: block; color: #cfd4e2; padding: .5em 0; font-size: .9rem; }

    .sx-l-grid--work, .sx-l-grid--wide, .sx-l-grid--feed,
    .sx-b-stats__list, .sx-b-people__inner, .sx-b-work-hero__inner,
    .sx-b-media-text__inner { grid-template-columns: 1fr; }
    .sx-b-media-text__inner--reverse .sx-b-media-text__media { order: 0; }
    .sx-l-footer__inner { grid-template-columns: 1fr; }
    .sx-b-stats__list { gap: 24px; }
}

.sx-c-brand__logo{display:block;height:28px;width:auto}

/* ==================================================================
 * ACF 块样式（13 个新增块：about / contact / thinking / expertise）
 * 根类由 inc/render-modules.php 按布局名推导（block_about_hero → sx-b-about-hero）
 * ================================================================== */
.sx-b-about-hero { padding-top: clamp(60px, 8vw, 140px); }
.sx-b-about-hero__inner { display: grid; gap: clamp(28px, 4vw, 64px); }
.sx-b-about-hero__heading { font-size: clamp(2.6rem, 8vw, 7.5rem); line-height: .98; font-weight: 700; letter-spacing: -.06em; }
.sx-b-about-hero__heading-line { display: block; }
.sx-b-about-hero__media { position: relative; aspect-ratio: 16 / 9; border-radius: 2px; }
.sx-b-about-hero__mask { position: absolute; inset: 0; pointer-events: none; }
.sx-b-about-hero__intro { max-width: 640px; font-size: clamp(1.1rem, 2vw, 1.6rem); color: var(--sx-ink-soft); }

.sx-b-about-gallery__list { display: grid; gap: clamp(16px, 2.4vw, 36px); }
.sx-b-about-gallery__media { aspect-ratio: 4 / 3; }
.sx-b-about-gallery__play { display: block; width: 100%; height: 100%; }

.sx-b-about-clients__intro { max-width: 640px; margin-bottom: 40px; color: var(--sx-ink-soft); }
.sx-b-about-clients__list { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 5vw, 70px); }
.sx-b-about-clients__logo { max-height: 56px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .7; }
.sx-b-about-clients__name { font-weight: 600; color: var(--sx-ink-soft); }

.sx-b-about-capabilities__intro { max-width: 640px; margin-bottom: 48px; color: var(--sx-ink-soft); }
.sx-b-about-capabilities__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.sx-b-about-capabilities__title { font-size: 1.2rem; font-weight: 600; margin-bottom: 16px; }
.sx-b-about-capabilities__list { display: grid; gap: 8px; color: var(--sx-ink-soft); }

.sx-b-about-testimonials__list { display: grid; gap: clamp(32px, 5vw, 64px); }
.sx-b-about-testimonials__quote { font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: 1.25; font-weight: 500; }
.sx-b-about-testimonials__author { display: flex; align-items: center; gap: 16px; margin-top: 24px; }
.sx-b-about-testimonials__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.sx-b-about-testimonials__name { display: block; font-weight: 600; }
.sx-b-about-testimonials__role { color: var(--sx-ink-soft); font-size: .9rem; }

.sx-b-about-team__inner { display: grid; gap: clamp(32px, 5vw, 72px); }
.sx-b-about-team__title { font-size: clamp(2.4rem, 7vw, 6rem); line-height: 1; font-weight: 700; letter-spacing: -.05em; }
.sx-b-about-team__hero { position: relative; aspect-ratio: 16 / 9; border-radius: 2px; }
.sx-b-about-team__mask { position: absolute; inset: 0; pointer-events: none; }
.sx-b-about-team__intro { max-width: 640px; color: var(--sx-ink-soft); }
.sx-b-about-team__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
.sx-b-about-team__portrait { aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.sx-b-about-team__name { display: block; font-weight: 600; margin-top: 12px; }
.sx-b-about-team__role { color: var(--sx-ink-soft); font-size: .9rem; }

.sx-b-about-awards__intro { max-width: 640px; margin-bottom: 40px; color: var(--sx-ink-soft); }
.sx-b-about-awards__list { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 5vw, 70px); }
.sx-b-about-awards__logo { max-height: 56px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .7; }
.sx-b-about-awards__name { font-weight: 600; color: var(--sx-ink-soft); }

.sx-b-about-do-dont__intro { max-width: 640px; margin-bottom: 40px; color: var(--sx-ink-soft); }
.sx-b-about-do-dont__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.sx-b-about-do-dont__heading { font-size: 1.3rem; font-weight: 700; margin-bottom: 16px; }
.sx-b-about-do-dont__list { display: grid; gap: 10px; color: var(--sx-ink-soft); }

.sx-b-contact-hero { padding-top: clamp(90px, 14vw, 200px); }
.sx-b-contact-hero__inner { position: relative; }
.sx-b-contact-hero__bg { position: absolute; inset: 0; z-index: -1; }
.sx-b-contact-hero__bg-img, .sx-b-contact-hero__bg-video { width: 100%; height: 100%; object-fit: cover; }
.sx-b-contact-hero__bg--mobile { display: none; }
.sx-b-contact-hero__heading { font-size: clamp(3rem, 9vw, 8rem); line-height: .98; font-weight: 700; letter-spacing: -.06em; }
.sx-b-contact-hero__button { margin-top: 32px; }

.sx-b-thinking-hero { padding-top: clamp(90px, 12vw, 180px); }
.sx-b-thinking-hero__title { font-size: clamp(2.6rem, 8vw, 7rem); line-height: 1; font-weight: 700; letter-spacing: -.05em; }
.sx-b-thinking-hero__subtitle { max-width: 640px; margin-top: 24px; color: var(--sx-ink-soft); font-size: clamp(1.1rem, 2vw, 1.5rem); }
.sx-b-thinking-hero__list { margin-top: 48px; border-top: 1px solid var(--sx-line); }
.sx-b-thinking-hero__item { border-bottom: 1px solid var(--sx-line); }
.sx-b-thinking-hero__link { display: block; padding: 22px 0; font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 500; }
.sx-b-thinking-hero__link:hover { color: var(--sx-accent); }

.sx-b-expertise-hero { padding-top: clamp(70px, 10vw, 160px); }
.sx-b-expertise-hero__inner { display: grid; gap: clamp(24px, 4vw, 48px); }
.sx-b-expertise-hero__theme { text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; color: var(--sx-ink-soft); }
.sx-b-expertise-hero__heading { font-size: clamp(2.8rem, 8vw, 7rem); line-height: 1; font-weight: 700; letter-spacing: -.05em; }
.sx-b-expertise-hero__media { aspect-ratio: 16 / 9; border-radius: 2px; }
.sx-b-expertise-hero__card { display: grid; gap: 16px; padding: 24px; background: var(--sx-surface); border: 1px solid var(--sx-line); border-radius: 16px; }
.sx-b-expertise-hero__card--light { background: var(--sx-ink); color: #fff; }
.sx-b-expertise-hero__card-img { width: 100%; border-radius: 8px; }
.sx-b-expertise-hero__card-desc { color: var(--sx-ink-soft); }

.sx-b-expertise-body__block { display: grid; gap: clamp(20px, 3vw, 40px); padding-block: clamp(24px, 4vw, 56px); border-top: 1px solid var(--sx-line); }
.sx-b-expertise-body__heading { font-size: clamp(1.8rem, 4vw, 3.4rem); font-weight: 700; letter-spacing: -.03em; }
.sx-b-expertise-body__intro { max-width: 640px; color: var(--sx-ink-soft); }
.sx-b-expertise-body__media { aspect-ratio: 16 / 9; border-radius: 2px; }
.sx-b-expertise-body__media--right { order: 2; }
.sx-b-expertise-body__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.sx-b-expertise-body__card { padding: 20px; background: var(--sx-surface); border: 1px solid var(--sx-line); border-radius: 12px; }
.sx-b-expertise-body__card-icon { display: block; font-size: 1.6rem; }
.sx-b-expertise-body__card-title { font-weight: 600; margin-top: 8px; }
.sx-b-expertise-body__card-desc { color: var(--sx-ink-soft); font-size: .92rem; margin-top: 6px; }
.sx-b-expertise-body__testimonials { display: grid; gap: clamp(24px, 4vw, 48px); }
.sx-b-expertise-body__testimonial { position: relative; overflow: hidden; padding: clamp(24px, 4vw, 48px); border-radius: 16px; }
.sx-b-expertise-body__testimonial-bg { position: absolute; inset: 0; z-index: -1; }
.sx-b-expertise-body__testimonial-quote { font-size: clamp(1.3rem, 3vw, 2.2rem); line-height: 1.3; font-weight: 500; }
.sx-b-expertise-body__testimonial-author { display: block; margin-top: 20px; }
.sx-b-expertise-body__testimonial-name { display: block; font-weight: 600; }
.sx-b-expertise-body__testimonial-role { opacity: .7; font-size: .9rem; }
.sx-b-expertise-body__cta { display: grid; gap: 4px; padding-block: 40px; }
.sx-b-expertise-body__cta-line { font-size: clamp(2rem, 6vw, 5rem); font-weight: 700; letter-spacing: -.05em; line-height: 1.05; }
.sx-b-expertise-body__clients { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 5vw, 64px); padding-block: 40px; }
.sx-b-expertise-body__client-logo { max-height: 48px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .7; }
.sx-b-expertise-body__client-name { font-weight: 600; color: var(--sx-ink-soft); }

.sx-b-expertise-related__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.sx-b-expertise-related__link { display: block; }
.sx-b-expertise-related__img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.sx-b-expertise-related__body { display: grid; gap: 6px; margin-top: 12px; }
.sx-b-expertise-related__theme { text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; color: var(--sx-ink-soft); }
.sx-b-expertise-related__title { font-weight: 600; }
.sx-b-expertise-related__desc { color: var(--sx-ink-soft); font-size: .92rem; }

@media (max-width: 40rem) {
    .sx-b-about-capabilities__grid, .sx-b-about-team__grid, .sx-b-about-do-dont__grid,
    .sx-b-expertise-body__cards, .sx-b-expertise-related__list { grid-template-columns: 1fr; }
    .sx-b-contact-hero__bg--desktop { display: none; }
    .sx-b-contact-hero__bg--mobile { display: block; }
}