/* ============================================================================
   ONCE / 一度影像 — Cinematic studio theme for AnQiCMS
   Translated from the Claude Design "ONCE Visual" system (Cinerama Edition).
   Palette: near-black ink + warm paper + a single deep crimson signal.
   Type: production-safe system font stacks; no external font dependency
   ========================================================================== */

/* ── Webfonts: Anybody Expanded（英文显示字体，自托管，SIL OFL 免费可商用） ──
   Etcetera Type Co 出品的宽体怪诞体（wdth=125 静态实例），Monument Extended 的
   开源替代。字体文件与 OFL.txt 授权文本在 /public/static/once/fonts/。
   unicode-range 限定拉丁字符：中文永远走苹方；某个字重文件缺失时该字重
   自动回退（font-display:swap 保证文字先显示，不阻塞渲染）。 */
@font-face{
  font-family:'Anybody Expanded';
  src:url('https://www.oncevisual.com/static/once/fonts/AnybodyExpanded-Light.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
  unicode-range:U+0000-024F,U+2000-206F,U+20A0-20CF,U+2100-214F;
}

/* ONCE NAV PLACEMENT 2026-08-03: keep the Guides entry in the footer only. */
.nav-menu > li > .navlink[href$="/video-production-guides.html"] {
  display: none;
}

.nav-menu > li:has(> .navlink[href$="/video-production-guides.html"]) {
  display: none;
}
@font-face{
  font-family:'Anybody Expanded';
  src:url('https://www.oncevisual.com/static/once/fonts/AnybodyExpanded-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-024F,U+2000-206F,U+20A0-20CF,U+2100-214F;
}
@font-face{
  font-family:'Anybody Expanded';
  src:url('https://www.oncevisual.com/static/once/fonts/AnybodyExpanded-Medium.woff2') format('woff2');
  font-weight:500 600; font-style:normal; font-display:swap;
  unicode-range:U+0000-024F,U+2000-206F,U+20A0-20CF,U+2100-214F;
}
@font-face{
  font-family:'Anybody Expanded';
  src:url('https://www.oncevisual.com/static/once/fonts/AnybodyExpanded-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0000-024F,U+2000-206F,U+20A0-20CF,U+2100-214F;
}
@font-face{
  font-family:'Anybody Expanded';
  src:url('https://www.oncevisual.com/static/once/fonts/AnybodyExpanded-Black.woff2') format('woff2');
  font-weight:900; font-style:normal; font-display:swap;
  unicode-range:U+0000-024F,U+2000-206F,U+20A0-20CF,U+2100-214F;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --ink-900:#08080A; --ink-850:#0C0C0E; --ink-800:#111114; --ink-700:#18181C;
  --ink-600:#202024; --ink-500:#2B2B30; --ink-400:#3C3C42; --ink-300:#56565E;
  --ink-200:#818189; --ink-150:#A2A2AA; --ink-100:#C5C5CC; --ink-050:#E4E4E8;
  --paper:#F4F3F1; --paper-dim:#E8E7E2; --white:#FFFFFF;

  --crimson-700:#6B130A; --crimson-600:#8E1A0C; --crimson-500:#B42410;
  --crimson-400:#D8412A; --signal-live:#E5533D;

  --bg:#08080A; --bg-elevated:#101012; --paper-bg:#F4F3F1;
  --text:#F4F3F1; --text-2:rgba(255,255,255,.70); --text-3:rgba(255,255,255,.55);
  --text-4:rgba(255,255,255,.45); --text-5:rgba(255,255,255,.40);
  --accent:#8E1A0C; --accent-hover:#B5240F; --on-accent:#fff;
  --hair:rgba(255,255,255,.10); --hair-2:rgba(255,255,255,.18); --hair-3:rgba(255,255,255,.28);

  /* 字体方案：英文 Anybody Expanded（自托管、OFL 免费商用、仅拉丁字符），中文苹方。
     展示字体在栈首、苹方随后 —— 同一行里拉丁字符走 Anybody、汉字走苹方；
     字体文件缺失时英文优雅回退苹方/系统字体。
     --font-serif 保留为别名，原 serif 展示位全部改由 Anybody 渲染。 */
  --font-display:'Anybody Expanded','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','Source Han Sans SC',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-serif:var(--font-display);
  --font-sans:var(--font-display);
  /* --font-cjk marks Chinese BODY contexts (descriptions, dates, form fields, prose) —
     it must NOT lead with Monument: extended display glyphs on inline Latin/digits
     (emails, 2026-07-02, name@brand.com) would break reading rhythm there. */
  --font-cjk:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','Source Han Sans SC',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --container:1480px;
  --gutter:56px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-cine:cubic-bezier(.22,.61,.36,1);

  /* unified card-hover lift and 45° scanline texture (dark surfaces) */
  --lift:-4px;
  --scan:repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 14px);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body.once{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-sans); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden; line-height:1.6;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
/* :where() keeps these resets at zero added specificity so single-class component rules
   (.cta__note, .hero__desc, .toolbar__top, .navlink …) can override them — a bare
   `.once a` / `.once p` reset silently beats and cancels their color/margin. */
.once :where(a){ color:inherit; text-decoration:none; }
.once :where(img){ max-width:100%; display:block; }
.once ::selection{ background:var(--accent); color:#fff; }
.once :where(h1,h2,h3,h4,p){ margin:0; }
.once :where(button){ font-family:inherit; }

/* keyboard focus (prelaunch a11y polish): visible ring for keyboard users only */
.once :focus{ outline:none; }
.once a:focus-visible,.once button:focus-visible,.once input:focus-visible,
.once textarea:focus-visible,.once select:focus-visible,.once [tabindex]:focus-visible{
  outline:2px solid var(--crimson-400); outline-offset:3px;
}

.container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }

/* ── Reveal-on-scroll ───────────────────────────────────────────────────── */
.once [data-reveal]{ opacity:0; transform:translateY(26px); }
.once [data-reveal].is-shown{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }

/* lazy images fade in when loaded — .img-fade is added by once.js so images stay visible without JS */
.once img.img-fade{ opacity:0; }
.once img.img-fade.is-loaded{ opacity:1; transition:opacity .45s var(--ease); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .once *,.once *::before,.once *::after{ animation:none !important; transition:none !important; }
  .once [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* ── Film grain overlay ─────────────────────────────────────────────────── */
@keyframes once-grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-3%,-2%)}30%{transform:translate(2%,-4%)}50%{transform:translate(-2%,3%)}70%{transform:translate(3%,2%)}90%{transform:translate(-1%,1%)}}
.grain{
  position:fixed; inset:-50%; z-index:55; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:once-grain 1.2s steps(4) infinite;
}

/* ── Eyebrow / overline ─────────────────────────────────────────────────── */
/* 12px 小字在深底上需要更高的亮度：深绯红 --accent(#8E1A0C) 对比不足 2.2:1，
   eyebrow 级别的红色小字统一用 --signal-live(#E5533D ≈ 5.4:1)；按钮、大色块仍用深绯红 */
.eyebrow{ font-weight:500; font-size:12px; letter-spacing:.42em; padding-left:.42em; color:var(--signal-live); }
.eyebrow.center{ text-align:center; }
.eyebrow--paper{ color:#7A7872; }

/* ── Headings ───────────────────────────────────────────────────────────── */
.h-display{ font-family:var(--font-serif); font-weight:500; line-height:1.02; letter-spacing:.01em; margin:0; }
.h-section{ font-family:var(--font-serif); font-weight:600; letter-spacing:.005em; margin:0; font-size:clamp(34px,4.4vw,60px); line-height:1.16; }
.h-section--sm{ font-size:clamp(26px,3.2vw,42px); }
.cn-spaced{ font-family:var(--font-cjk); font-weight:200; letter-spacing:.4em; padding-left:.4em; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:12px; padding:16px 34px;
  font-weight:600; font-size:12.5px; letter-spacing:.24em; cursor:pointer;
  border:1px solid transparent; transition:transform .3s, box-shadow .3s, border-color .3s, gap .3s; background:none; color:#fff;
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(142,26,12,.5); background:var(--accent-hover); }
.btn-outline{ border-color:var(--hair-3); color:#fff; }
.btn-outline:hover{ border-color:#fff; gap:18px; }
.btn svg{ flex:none; }

/* ============================================================================
   NAV
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  min-height:64px; padding:22px var(--gutter); background:rgba(8,8,10,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
}
.nav--transparent{ position:absolute; left:0; right:0; top:0; background:none; backdrop-filter:none; border-bottom-color:transparent; }
/* transparent nav pins back with the glass treatment once the hero is scrolled past (once.js adds .is-scrolled) */
.nav--transparent.is-scrolled{
  position:fixed; background:rgba(8,8,10,.82); backdrop-filter:blur(14px);
  border-bottom-color:var(--hair); animation:once-nav-in .35s var(--ease) both;
}
@keyframes once-nav-in{ from{ transform:translateY(-100%); } to{ transform:none; } }
/* wordmark-only brand (CN sub-text removed), enlarged 19→28px */
.nav-brand{ display:flex; align-items:center; white-space:nowrap; }
.nav-brand .wordmark{ height:28px; width:auto; color:var(--paper); }
.nav-brand .wordmark svg{ height:100%; width:auto; display:block; }
.nav-brand .cn{ font-family:var(--font-cjk); font-weight:300; font-size:12px; letter-spacing:.42em; color:rgba(255,255,255,.5); }

.nav-menu{ display:flex; align-items:center; gap:38px; list-style:none; margin:0; padding:0; }
.nav-menu > li{ position:relative; }
.navlink{ position:relative; font-weight:600; font-size:12.5px; letter-spacing:.22em; color:var(--text-2); transition:color .3s; text-transform:uppercase; white-space:nowrap; }
.navlink::after{ content:''; position:absolute; left:0; bottom:-7px; width:0; height:1px; background:var(--accent); transition:width .35s var(--ease); }
.navlink:hover::after,.navlink.active::after{ width:100%; }
.navlink:hover,.navlink.active{ color:#fff; }
.navlink.active{ color:var(--signal-live); }

/* dropdown */
.nav-menu .submenu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  min-width:180px; background:rgba(12,12,14,.96); backdrop-filter:blur(14px); border:1px solid var(--hair);
  padding:10px 0; list-style:none; margin:14px 0 0; opacity:0; visibility:hidden;
  transition:.3s var(--ease); transition-delay:.16s; /* grace period so the pointer can cross into the submenu */
}
.nav-menu > li:hover .submenu,.nav-menu > li:focus-within .submenu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); transition-delay:0s; }
/* invisible hover bridge across the 14px gap between the link and its dropdown —
   without it li:hover breaks mid-travel and the submenu closes before it can be clicked */
@media (min-width:1101px){
  .nav-menu > li:has(.submenu):hover::after{
    content:''; position:absolute; left:-14px; right:-14px; top:100%; height:30px;
  }
}
.nav-menu .submenu a{ display:block; padding:9px 22px; font-size:12px; letter-spacing:.1em; color:var(--text-3); transition:color .25s, background .25s; }
.nav-menu .submenu a:hover{ color:#fff; background:rgba(255,255,255,.04); }

.nav-right{ display:flex; align-items:center; gap:22px; }
.nav-showreel{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:12.5px; letter-spacing:.22em; color:var(--accent); cursor:pointer; }
.nav-showreel .diamond{ display:inline-block; width:14px; height:14px; border:1.5px solid var(--accent); transform:rotate(45deg); }
.nav-social{ display:flex; gap:15px; font-size:11px; color:var(--text-3); letter-spacing:.16em; }
.nav-social a{ transition:color .3s; }
.nav-social a:hover{ color:#fff; }
.nav-language{ position:relative; color:var(--text-2); }
.nav-language summary{
  display:flex; align-items:center; justify-content:center; min-width:48px; min-height:34px; padding:0 10px;
  border:1px solid var(--hair-3); border-radius:999px; cursor:pointer; list-style:none;
  font-size:10px; font-weight:700; letter-spacing:.14em; color:inherit; transition:color .25s,border-color .25s;
}
.nav-language summary::-webkit-details-marker{ display:none; }
.nav-language summary::after{ content:'⌄'; margin-left:6px; font-size:11px; transform:translateY(-1px); }
.nav-language[open] summary,.nav-language summary:hover{ color:#fff; border-color:rgba(255,255,255,.48); }
.nav-language__menu{
  position:absolute; top:calc(100% + 12px); right:0; z-index:2; min-width:156px; padding:8px;
  background:rgba(12,12,14,.98); border:1px solid var(--hair); box-shadow:0 18px 48px rgba(0,0,0,.32);
}
.nav-language__menu a{
  display:flex; align-items:center; gap:9px; padding:9px 10px; color:var(--text-3);
  font-size:12px; letter-spacing:.06em; white-space:nowrap; transition:color .2s,background .2s;
}
.nav-language__menu a:hover,.nav-language__menu a.active{ color:#fff; background:rgba(255,255,255,.05); }
.nav-language__menu a.active{ color:var(--accent); }
.nav-language__menu img{ width:18px; height:18px; object-fit:contain; }
.nav-toggle{ display:none; background:none; border:none; color:#fff; cursor:pointer; padding:6px; }

/* ============================================================================
   HERO (home)
   ========================================================================== */
.hero{
  position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:120px 40px 90px; overflow:hidden; text-align:center;
}
.hero__bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background-color:#060608;
  background-image:url("https://once-1253477534.cos.ap-guangzhou.myqcloud.com/uploads/202607/13/e5f5beb462568ba5.webp");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.hero__video{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  display:block; object-fit:cover; object-position:center; pointer-events:none;
}
.hero__bg::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,6,8,.66) 0%, rgba(6,6,8,.46) 42%, rgba(6,6,8,.42) 66%, rgba(6,6,8,.58) 100%),
    linear-gradient(180deg, rgba(6,6,8,.28) 0%, rgba(6,6,8,.22) 45%, rgba(6,6,8,.62) 100%);
}
.hero__glow-top{ position:absolute; inset:0; background:radial-gradient(64% 80% at 50% 8%, rgba(255,255,255,.16), rgba(255,255,255,.03) 36%, transparent 62%); }
.hero__glow-bottom{ position:absolute; inset:0; background:radial-gradient(120% 100% at 50% 120%, rgba(0,0,0,.7), transparent 60%); }
.hero__glow-red{ position:absolute; inset:0; background:radial-gradient(80% 60% at 88% 18%, rgba(142,26,12,.20), transparent 55%); }
.hero__spotlight{ position:absolute; left:50%; bottom:8%; width:130px; height:78%; transform:translateX(-50%); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(220,200,210,.10) 55%, transparent); filter:blur(8px); }
.hero__glow-top,.hero__glow-bottom,.hero__glow-red,.hero__spotlight{ z-index:1; pointer-events:none; }
@media (max-width:720px){
  .hero__bg{
    background-image:url("https://once-1253477534.cos.ap-guangzhou.myqcloud.com/uploads/202607/13/8f4e2a9afcb73dd0.webp");
    background-position:center;
  }
  .hero__bg::after{
    background:
      linear-gradient(180deg, rgba(6,6,8,.52) 0%, rgba(6,6,8,.34) 38%, rgba(6,6,8,.68) 100%),
      linear-gradient(90deg, rgba(6,6,8,.48) 0%, rgba(6,6,8,.26) 50%, rgba(6,6,8,.46) 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  .hero__video{ display:none; }
}
.hero__watermark{
  position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-54%);
  font-family:var(--font-cjk); font-weight:700; font-size:clamp(120px,26vw,420px); letter-spacing:.04em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.10); white-space:nowrap; pointer-events:none; user-select:none;
}
.hero__inner{ position:relative; z-index:3; max-width:1200px; }
.hero__eyebrow{ font-weight:500; font-size:13px; letter-spacing:.5em; padding-left:.5em; color:#fff; margin-bottom:30px; }
.hero__wordmark{ width:clamp(300px,56vw,820px); height:auto; margin:0 auto; color:var(--paper); }
.hero__wordmark svg{ width:100%; height:auto; display:block; }
/* tagline 承载 SEO 长句：.4em 字距会把中文撑散成"字符云"，收成 .16em、
   加重到 300、限宽居中，视觉上是完整的一句标语，文本不变不影响 SEO */
.hero__tagline{ font-family:var(--font-cjk); font-weight:300; font-size:clamp(14px,1.7vw,20px); letter-spacing:.16em; padding-left:.16em; line-height:1.75; max-width:1060px; margin-left:auto; margin-right:auto; color:var(--text-2); margin-top:18px; }
.hero__desc{ max-width:760px; margin:24px auto 0; font-family:var(--font-cjk); font-weight:300; font-size:clamp(15px,1.45vw,19px); line-height:1.95; letter-spacing:.08em; color:rgba(255,255,255,.72); }
.hero__cta{ display:flex; gap:18px; justify-content:center; margin-top:46px; flex-wrap:wrap; }
@media (max-width:560px){
  .hero__cta{ flex-direction:column; align-items:stretch; gap:14px; }
  .hero__cta .btn{ width:100%; justify-content:center; }
}
.hero__slate{
  display:inline-flex; align-items:stretch; margin-top:40px; border:1px solid var(--hair-3);
  font-size:11px; letter-spacing:.14em; color:rgba(255,255,255,.82);
}
.hero__slate b{ padding:9px 14px; background:rgba(255,255,255,.12); border-right:1px solid var(--hair-3); font-weight:700; letter-spacing:.18em; }
.hero__slate span{ padding:9px 16px; }
.hero__scroll{ position:absolute; z-index:3; bottom:34px; left:50%; transform:translateX(-50%); font-size:11px; letter-spacing:.3em; color:rgba(255,255,255,.5); display:flex; flex-direction:column; align-items:center; gap:8px; }
.hero__scroll i{ width:1px; height:30px; background:linear-gradient(rgba(255,255,255,.5),transparent); }
.hero-rise{ animation:once-rise 1.1s var(--ease) both; }
@keyframes once-rise{ from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none} }
@keyframes once-fade{ from{opacity:0} to{opacity:1} }

/* ── Hot search strip ───────────────────────────────────────────────────── */
.hotbar{ background:var(--bg); border-bottom:1px solid var(--hair); }
.hotbar .container{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; padding-top:22px; padding-bottom:22px; }
.hotbar > .container > span{ font-size:11px; letter-spacing:.24em; color:var(--text-4); }
.hotbar a{ font-size:13px; letter-spacing:.06em; color:var(--text-2); transition:color .3s; }
.hotbar a:hover{ color:var(--accent); }

/* ============================================================================
   SECTIONS
   ========================================================================== */
.section{ padding:120px 0 130px; }
.section--tight{ padding:96px 0; }
.section--elevated{ background:var(--bg-elevated); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.section--paper{ background:var(--paper-bg); color:#0C0C0D; }
.section-head{ text-align:center; margin-bottom:74px; }
.section-head .eyebrow{ margin-bottom:18px; }
.section-head--split{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:24px; text-align:left; margin-bottom:64px; }
.section-lead{ font-family:var(--font-cjk); font-weight:300; font-size:15px; line-height:1.9; letter-spacing:.08em; color:var(--text-3); max-width:420px; margin:0; }

/* ── Work grid + cards ──────────────────────────────────────────────────── */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.work-card{ display:block; color:#fff; }
.work-card__media{
  position:relative; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(135deg,#1b1b1f,#0b0b0d);
  border:1px solid var(--hair); transition:transform .5s var(--ease), border-color .4s;
}
.work-card:hover .work-card__media{ transform:translateY(var(--lift)); border-color:var(--accent); }
.work-card__media::before{ content:''; position:absolute; inset:0; background-image:var(--scan); }
.work-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), filter .4s; filter:saturate(.85); }
.work-card:hover .work-card__media img{ transform:scale(1.05); filter:saturate(1); }
/* 角标压半透明黑底：白天场景缩略图上纯白小字会消失（如户外/天空画面） */
.work-card__meta{ position:absolute; top:14px; left:16px; font-size:10px; letter-spacing:.22em; color:rgba(255,255,255,.88); z-index:2; padding:4px 8px 3px; background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(3px); }
.work-card__dur{ position:absolute; top:14px; right:16px; font-size:10px; letter-spacing:.1em; color:rgba(255,255,255,.72); z-index:2; padding:4px 8px 3px; background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.10); backdrop-filter:blur(3px); }
.work-card__play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; }
.work-card__shade{ position:absolute; bottom:0; left:0; right:0; height:46%; background:linear-gradient(transparent, rgba(0,0,0,.55)); }
.work-card__row{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-top:18px; }
/* 标题固定两行高度 + 截断：一行/两行标题混排时下方"年份·分类"行仍然对齐 */
.work-card__title{ font-weight:500; font-size:15px; letter-spacing:.18em; line-height:1.3; min-height:calc(2 * 1.3 * 1em); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.work-card__cn{ font-family:var(--font-cjk); font-weight:300; font-size:13px; letter-spacing:.2em; color:var(--accent); flex:none; padding-top:2px; }
.work-card__sub{ font-size:10px; letter-spacing:.22em; color:var(--text-5); margin-top:9px; }

.center-more{ text-align:center; margin-top:70px; }

/* ── Filter tabs ────────────────────────────────────────────────────────── */
.filters{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:54px; }
.filter-btn{
  background:transparent; color:rgba(255,255,255,.6); border:1px solid var(--hair-2);
  padding:11px 22px; font-weight:600; font-size:11px; letter-spacing:.2em; cursor:pointer; transition:all .3s; text-transform:uppercase;
}
.filter-btn:hover{ border-color:#fff; color:#fff; }
.filter-btn.active{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* ============================================================================
   HOME: cooperation modes / services
   ========================================================================== */
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--hair); }
.svc-card{ padding:38px 26px 44px; border-bottom:1px solid var(--hair); border-right:1px solid var(--hair); min-height:230px; display:flex; flex-direction:column; transition:background .4s; color:#fff; }
.svc-card:hover{ background:rgba(255,255,255,.02); }
.svc-card__no{ font-size:12px; letter-spacing:.2em; color:var(--signal-live); }
.svc-card__cn{ font-family:var(--font-cjk); font-weight:500; font-size:21px; letter-spacing:.06em; margin-top:auto; }
.svc-card__en{ font-weight:500; font-size:11px; letter-spacing:.28em; color:var(--text-3); margin-top:10px; }
.svc-card__desc{ font-family:var(--font-cjk); font-weight:300; font-size:13px; line-height:1.8; letter-spacing:.04em; color:var(--text-5); margin-top:14px; }
.home-services{ background:linear-gradient(180deg,#101012 0%, #0b0b0d 100%); }
.svc-grid--curated{ gap:0; }
.svc-card--curated{ position:relative; overflow:hidden; min-height:270px; background:rgba(255,255,255,.012); }
.svc-card--curated::after{ content:'→'; position:absolute; right:24px; bottom:22px; font-size:18px; color:rgba(255,255,255,.22); transition:transform .35s var(--ease), color .35s; }
.svc-card--curated:hover::after{ transform:translateX(5px); color:var(--accent); }
.svc-card--curated .svc-card__en{ margin-top:18px; }
.svc-card--curated .svc-card__cn{ margin-top:56px; }
.svc-card--curated .svc-card__desc{ max-width:280px; color:rgba(255,255,255,.48); }
/* 第 8 格 CTA 卡：补齐 4×2（2 列断点下同样补齐）网格缺角，浅绯红渐变区别于方案卡，
   箭头常亮提示可点；hover 加深但保持整体克制 */
.svc-card--cta{ background:linear-gradient(158deg, rgba(142,26,12,.18), rgba(142,26,12,.06) 58%, rgba(255,255,255,.012)); }
.svc-card--cta:hover{ background:linear-gradient(158deg, rgba(142,26,12,.26), rgba(142,26,12,.09) 58%, rgba(255,255,255,.02)); }
.svc-card--cta::after{ color:var(--signal-live); }
.svc-card--cta .svc-card__no{ color:var(--signal-live); }

/* ============================================================================
   HOME: signature offer / global launch content pack
   ========================================================================== */
.launch-pack{
  position:relative; overflow:hidden; background:radial-gradient(70% 70% at 50% 0%, rgba(142,26,12,.17), transparent 58%), linear-gradient(180deg,#09090b 0%,#0d0d10 100%);
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
}
.launch-pack::before{ content:'ONCE'; position:absolute; right:-1vw; top:42px; font-family:var(--font-serif); font-weight:700; font-size:clamp(86px,15vw,230px); line-height:.8; letter-spacing:.02em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.045); pointer-events:none; user-select:none; }
.launch-pack__intro{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:end; margin-bottom:46px; }
.launch-pack__title{ max-width:820px; margin:18px 0 0; font-family:var(--font-serif); font-weight:600; font-size:clamp(38px,5.6vw,76px); line-height:.98; letter-spacing:-.025em; text-transform:uppercase; }
.launch-pack__lead{ max-width:610px; justify-self:end; font-family:var(--font-cjk); font-weight:300; font-size:15px; line-height:1.95; letter-spacing:.04em; color:var(--text-3); }
.launch-pack__lead p{ margin:0; }
.launch-pack__principle{ margin-top:22px !important; padding-left:18px; border-left:2px solid var(--accent); color:rgba(255,255,255,.78); }
.launch-pack__grid{ position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--hair-2); border-left:1px solid var(--hair); }
.launch-pack__card{ position:relative; min-width:0; min-height:560px; padding:28px 28px 26px; display:flex; flex-direction:column; border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); background:rgba(255,255,255,.012); transition:background .35s, border-color .35s, transform .45s var(--ease); }
.launch-pack__card:hover{ background:rgba(255,255,255,.027); border-color:rgba(255,255,255,.2); transform:translateY(var(--lift)); }
.launch-pack__card--featured{ background:linear-gradient(180deg,rgba(142,26,12,.16),rgba(255,255,255,.025) 34%,rgba(255,255,255,.012)); box-shadow:0 28px 80px rgba(0,0,0,.24); }
.launch-pack__card--featured::before{ content:''; position:absolute; left:-1px; right:-1px; top:-1px; height:3px; background:var(--accent); }
.launch-pack__badge{ align-self:flex-start; margin:-14px 0 16px; padding:7px 10px 6px; background:var(--accent); color:#fff; font-size:9px; font-weight:700; line-height:1; letter-spacing:.18em; }
.launch-pack__meta{ display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:10px; letter-spacing:.24em; color:var(--text-4); }
.launch-pack__meta span:first-child{ color:var(--accent); }
.launch-pack__card h3{ margin:22px 0 10px; font-family:var(--font-cjk); font-weight:500; font-size:clamp(25px,2.1vw,33px); line-height:1.25; letter-spacing:.04em; }
.launch-pack__fit{ min-height:62px; font-family:var(--font-cjk); font-weight:300; font-size:13px; line-height:1.8; letter-spacing:.04em; color:var(--text-4); }
.launch-pack__price{ display:flex; align-items:flex-end; gap:7px; min-height:66px; margin:18px 0 0; padding-bottom:18px; border-bottom:1px solid var(--hair); color:#fff; }
.launch-pack__price span{ align-self:flex-start; margin-top:14px; font-size:15px; color:var(--accent); }
.launch-pack__price strong{ font-family:var(--font-serif); font-weight:600; font-size:clamp(42px,4vw,58px); line-height:.95; letter-spacing:-.035em; white-space:nowrap; }
.launch-pack__price em{ margin-bottom:5px; font-family:var(--font-cjk); font-size:12px; font-style:normal; color:var(--text-3); }
.launch-pack__price--range{ min-height:82px; gap:5px; }
.launch-pack__price--range strong{ font-size:clamp(28px,2.65vw,41px); letter-spacing:-.04em; }
.launch-pack__price-note{ margin-top:-19px; padding-bottom:24px; font-family:var(--font-cjk); font-size:11px; letter-spacing:.08em; color:var(--text-4); }
.launch-pack__deliverables{ list-style:none; padding:0; margin:18px 0 24px; display:flex; flex-direction:column; gap:0; }
.launch-pack__deliverables li{ position:relative; padding:8px 0 8px 16px; border-bottom:1px solid rgba(255,255,255,.055); font-family:var(--font-cjk); font-weight:300; font-size:13px; line-height:1.65; letter-spacing:.035em; color:rgba(255,255,255,.68); }
.launch-pack__deliverables li::before{ content:''; position:absolute; left:1px; top:15px; width:5px; height:5px; background:var(--accent); transform:rotate(45deg); }
.launch-pack__cta{ margin-top:auto; min-height:52px; padding:15px 17px; display:flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid var(--hair-2); color:#fff; font-family:var(--font-cjk); font-size:12px; font-weight:500; letter-spacing:.06em; transition:background .3s,border-color .3s,color .3s; }
.launch-pack__cta:hover{ border-color:#fff; background:#fff; color:#0a0a0c; }
.launch-pack__cta span{ font-family:var(--font-sans); font-size:17px; transition:transform .3s var(--ease); }
.launch-pack__cta:hover span{ transform:translateX(4px); }
.launch-pack__cta--primary{ border-color:var(--accent); background:var(--accent); }
.launch-pack__cta--primary:hover{ border-color:var(--accent-hover); background:var(--accent-hover); color:#fff; }
.launch-pack__footer{ display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; padding-top:34px; }
.launch-pack__footer p{ max-width:850px; font-family:var(--font-cjk); font-weight:300; font-size:12px; line-height:1.8; letter-spacing:.04em; color:var(--text-4); }
.launch-pack__footer a{ font-family:var(--font-cjk); font-size:12px; font-weight:500; letter-spacing:.05em; color:#fff; white-space:nowrap; transition:color .3s; }
.launch-pack__footer a:hover{ color:var(--crimson-400); }

@media (max-width:1100px){
  .launch-pack__intro{ grid-template-columns:1fr; gap:30px; align-items:start; }
  .launch-pack__lead{ max-width:720px; justify-self:start; }
  .launch-pack__card{ padding-left:26px; padding-right:26px; }
}
@media (max-width:920px){
  .launch-pack__grid{ grid-template-columns:1fr; }
  .launch-pack__card{ min-height:0; padding:34px 30px; }
  .launch-pack__fit{ min-height:0; max-width:620px; }
  .launch-pack__price strong{ font-size:clamp(42px,8vw,60px); }
  .launch-pack__price--range strong{ font-size:clamp(31px,6.2vw,46px); }
  .launch-pack__footer{ grid-template-columns:1fr; gap:18px; }
  .launch-pack__footer a{ white-space:normal; }
}
@media (max-width:560px){
  .launch-pack::before{ top:28px; font-size:94px; }
  .launch-pack__intro{ margin-bottom:46px; }
  .launch-pack__title{ font-size:clamp(35px,11vw,52px); line-height:1.02; }
  .launch-pack__lead{ font-size:14px; }
  .launch-pack__card{ padding:30px 22px 24px; }
  .launch-pack__badge{ margin-top:-12px; }
  .launch-pack__card h3{ margin-top:26px; }
  .launch-pack__price{ margin-top:22px; }
  .launch-pack__price strong{ font-size:clamp(39px,12vw,52px); }
  .launch-pack__price--range strong{ font-size:clamp(27px,8vw,36px); }
  .launch-pack__deliverables li{ font-size:12.5px; }
}

/* ── About teaser (home) ────────────────────────────────────────────────── */
.about-teaser{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-teaser__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:linear-gradient(135deg,#1f1a1a,#0a0a0c); border:1px solid var(--hair); }
.about-teaser__media img{ width:100%; height:100%; object-fit:cover; }
.about-teaser h2{ font-family:var(--font-serif); font-weight:500; font-size:clamp(28px,3.4vw,48px); line-height:1.1; margin:0 0 24px; }
.about-teaser p{ font-family:var(--font-cjk); font-weight:300; font-size:15px; line-height:1.95; letter-spacing:.04em; color:var(--text-3); margin:0 0 30px; }
.about-teaser--home{ grid-template-columns:.86fr 1.14fr; }
.about-signal{ position:relative; min-height:430px; display:flex; flex-direction:column; justify-content:flex-end; padding:34px; overflow:hidden; border:1px solid var(--hair); background:radial-gradient(70% 80% at 72% 20%, rgba(142,26,12,.25), transparent 62%), linear-gradient(135deg,#171719,#050506); }
.about-signal::before{ content:''; position:absolute; inset:0; background-image:var(--scan); }
.about-signal::after{ content:'ONCE'; position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); font-family:var(--font-serif); font-size:clamp(64px,8vw,132px); letter-spacing:.04em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.13); }
.about-signal__tag{ position:relative; z-index:1; align-self:flex-start; padding:8px 11px 6px; border:1px solid var(--hair-2); font-size:10px; letter-spacing:.28em; color:var(--text-3); }
.about-signal strong{ position:relative; z-index:1; margin-top:auto; font-family:var(--font-cjk); font-weight:700; font-size:clamp(54px,7vw,106px); line-height:1; letter-spacing:.08em; color:#fff; }
.about-signal small{ position:relative; z-index:1; max-width:330px; margin-top:16px; font-size:10px; letter-spacing:.22em; line-height:1.8; color:var(--text-4); }

/* ── Journal cards (home + list) ────────────────────────────────────────── */
.journal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px; }
.journal-card{ display:block; color:inherit; }
.journal-card__media{ position:relative; aspect-ratio:3/2; overflow:hidden; background:linear-gradient(135deg,#19191d,#0a0a0c); border:1px solid var(--hair); transition:transform .5s var(--ease), border-color .4s; }
.journal-card:hover .journal-card__media{ transform:translateY(var(--lift)); border-color:var(--accent); }
.journal-card__media::before{ content:''; position:absolute; inset:0; background-image:var(--scan); }
.journal-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.journal-card__tag{ position:absolute; bottom:14px; left:16px; font-size:10px; letter-spacing:.2em; color:var(--text-3); z-index:2; }
.journal-card__placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1; color:var(--text-4); font-size:11px; letter-spacing:.26em; text-align:center; padding:24px; }
.journal-card__date{ font-family:var(--font-cjk); font-weight:300; font-size:12.5px; letter-spacing:.06em; color:var(--text-4); margin-top:22px; }
.journal-card__title{ font-family:var(--font-serif); font-weight:500; font-size:17.6px; line-height:1.25; letter-spacing:.005em; margin:12px 0 0; }
.journal-card__excerpt{ font-family:var(--font-cjk); font-weight:300; font-size:13.5px; line-height:1.85; letter-spacing:.03em; color:var(--text-3); margin:12px 0 0; }

/* paper variants (home journal uses paper bg) */
.section--paper .journal-card__media{ background:linear-gradient(135deg,#d8d6d0,#bdbab2); border:none; }
.section--paper .journal-card__media::before{ background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 2px, transparent 2px 13px); }
.section--paper .journal-card__tag{ color:rgba(0,0,0,.45); }
.section--paper .journal-card__date{ color:#7A7872; }
.section--paper .journal-card__title{ font-family:inherit; font-weight:700; font-size:23px; letter-spacing:.1em; color:#0C0C0D; }
.section--paper .journal-card__excerpt{ color:#7A7872; }
.section--paper .h-section{ color:#0C0C0D; }

/* ── Clients strip ──────────────────────────────────────────────────────── */
.clients{ background:var(--bg); padding:74px 0; border-bottom:1px solid var(--hair); }
.clients .container{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:40px; }
.clients span{ font-family:var(--font-cjk); font-weight:500; font-size:18px; letter-spacing:.16em; color:var(--text-5); transition:color .4s; }
.clients span:hover{ color:#fff; }

/* ── Brand logo wall (homepage; docs under category 33, logo = doc cover) ──
   single row, auto-scrolling marquee — see index/index.html for the markup rationale. */
.brands{ background:var(--bg); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:72px 0 78px; overflow:hidden; }
.brands__head{ margin-bottom:46px; }

.brands__marquee{
  width:100vw; margin-left:calc(50% - 50vw);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.brands__track{ display:flex; width:max-content; animation:brands-scroll 34s linear infinite; }
.brands__track:hover{ animation-play-state:paused; }
@keyframes brands-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.brands__grid{ display:flex; flex-wrap:nowrap; align-items:center; gap:64px; padding:0 32px; flex-shrink:0; }
.brands__item{ display:flex; align-items:center; justify-content:center; min-height:36px; flex-shrink:0; }
/* logos are normalised to quiet grayscale on the dark ground; colour returns on hover */
.brands__item img{
  height:34px; width:auto; max-width:150px; object-fit:contain;
  filter:grayscale(1) brightness(1.4); opacity:.52;
  transition:opacity .35s, filter .35s;
}
.brands__item:hover img{ filter:none; opacity:1; }
.brands__name{ font-family:var(--font-cjk); font-weight:500; font-size:17px; letter-spacing:.16em; color:var(--text-5); transition:color .35s; white-space:nowrap; }
.brands__item:hover .brands__name{ color:#fff; }

/* reduced motion: the global rule already freezes .brands__track's animation — this just
   hides the decorative repeat pass so a frozen track reads as one row, not a stall. */
@media (prefers-reduced-motion: reduce){
  .brands__grid[aria-hidden="true"]{ display:none; }
}

@media (max-width:860px){
  .brands{ padding:54px 0 60px; }
  .brands__grid{ gap:36px; padding:0 20px; }
  .brands__item img{ height:26px; max-width:110px; }
  .brands__track{ animation-duration:24s; }
}

/* ── Friendlinks ────────────────────────────────────────────────────────── */
.flink{ background:var(--bg); }
.flink .container{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding-top:36px; padding-bottom:36px; border-top:1px solid var(--hair); }
.flink > .container > span{ font-size:11px; letter-spacing:.24em; color:var(--text-4); }
.flink a{ font-size:13px; color:var(--text-3); transition:color .3s; }
.flink a:hover{ color:#fff; }

/* ============================================================================
   PAGE HEADER (inner list pages)
   ========================================================================== */
.page-header{ position:relative; padding:96px var(--gutter) 60px; overflow:hidden; border-bottom:1px solid var(--hair); }
.page-header__glow{ position:absolute; inset:0; background:radial-gradient(70% 120% at 85% 0%, rgba(142,26,12,.18), transparent 55%); }
.page-header__inner{ position:relative; max-width:var(--container); margin:0 auto; }
.page-header__split{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:30px; }
.page-header .eyebrow{ margin-bottom:18px; display:block; }
.page-header h1{ font-family:var(--font-serif); font-weight:500; font-size:clamp(40px,6.6vw,92px); line-height:1.04; letter-spacing:.01em; margin:0; }
.page-header p{ font-family:var(--font-cjk); font-weight:300; font-size:15px; line-height:1.9; letter-spacing:.06em; color:var(--text-3); max-width:480px; margin:26px 0 0; }
.page-header__stats{ position:relative; max-width:var(--container); margin:34px auto 0; display:flex; gap:24px; font-size:11px; letter-spacing:.18em; color:var(--text-5); }

/* breadcrumb */
.crumb{ background:var(--bg); border-bottom:1px solid var(--hair); }
.crumb .container{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-top:18px; padding-bottom:18px; font-size:11px; letter-spacing:.16em; color:var(--text-4); }
.crumb a{ color:var(--text-3); transition:color .3s; }
.crumb a:hover{ color:#fff; }
.crumb .sep{ color:var(--text-5); }

/* ============================================================================
   ARTICLE DETAIL
   ========================================================================== */
.read-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:80; background:rgba(255,255,255,.06); }
.read-progress i{ display:block; height:100%; width:0%; background:var(--accent); transition:width .1s linear; }

.article-head{ position:relative; padding:84px var(--gutter) 56px; overflow:hidden; text-align:center; }
.article-head__glow{ position:absolute; inset:0; background:radial-gradient(60% 100% at 50% 0%, rgba(142,26,12,.16), transparent 60%); }
.article-head__inner{ position:relative; max-width:820px; margin:0 auto; }
.back-link{ display:inline-flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.2em; color:var(--text-3); margin-bottom:30px; transition:color .3s; }
.back-link:hover{ color:#fff; }
.article-head h1{ font-family:var(--font-serif); font-weight:500; font-size:clamp(30px,4.2vw,54px); line-height:1.14; letter-spacing:.005em; margin:0; }
.article-head__cn{ font-family:var(--font-cjk); font-weight:300; font-size:clamp(16px,2vw,22px); letter-spacing:.22em; color:var(--text-2); margin-top:18px; }
.article-meta{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:34px; font-size:11px; letter-spacing:.18em; color:var(--text-4); flex-wrap:wrap; }

.cover{ padding:0 var(--gutter) 70px; }
.cover__frame{ max-width:1160px; margin:0 auto; position:relative; aspect-ratio:21/9; overflow:hidden; background:linear-gradient(135deg,#1f1a1a,#0a0a0c); border:1px solid var(--hair); }
.cover__frame img{ width:100%; height:100%; object-fit:cover; }
.cover__frame::after{ content:''; position:absolute; inset:0; background:radial-gradient(60% 70% at 70% 40%, rgba(142,26,12,.20), transparent 60%); }

.article-body{ padding:0 var(--gutter) 110px; }
.article-body__grid{ max-width:1160px; margin:0 auto; display:grid; grid-template-columns:230px minmax(0,1fr); gap:64px; align-items:start; }
.article-body__grid>*{ min-width:0; }
.toc{ position:sticky; top:120px; display:flex; flex-direction:column; gap:16px; }
.toc__title{ font-size:10px; letter-spacing:.28em; color:var(--text-5); padding-bottom:10px; border-bottom:1px solid var(--hair); }
.toc a{ font-family:var(--font-cjk); font-weight:300; font-size:13.5px; letter-spacing:.04em; color:var(--text-3); transition:color .3s; }
.toc a:hover{ color:var(--accent); }
.toc__share{ margin-top:14px; padding-top:18px; border-top:1px solid var(--hair); display:flex; gap:14px; font-size:11px; letter-spacing:.14em; color:var(--text-3); }

.prose{ min-width:0; overflow-wrap:anywhere; font-family:var(--font-cjk); }
.toc a{ overflow-wrap:anywhere; }
.prose p{ font-weight:300; font-size:17px; line-height:2.05; letter-spacing:.03em; color:rgba(255,255,255,.72); margin:0 0 28px; }
.prose > p:first-child{ font-size:19px; color:rgba(255,255,255,.85); line-height:1.95; }
.prose h2{ font-family:var(--font-serif); font-weight:500; font-size:32px; line-height:1.25; letter-spacing:.005em; color:#fff; margin:54px 0 22px; scroll-margin-top:90px; }
.prose h3{ font-family:var(--font-serif); font-weight:500; font-size:24px; margin:40px 0 18px; }
.prose img{ margin:32px 0; border:1px solid var(--hair); }
.prose a{ color:var(--crimson-400); }
.prose ul,.prose ol{ color:rgba(255,255,255,.72); font-weight:300; font-size:16px; line-height:2; padding-left:1.3em; margin:0 0 28px; }
/* upright, not italic — CJK has no true italics and synthetic slant looks broken */
.prose blockquote{ margin:32px 0; padding:6px 0 6px 28px; border-left:2px solid var(--accent); color:#fff; font-family:var(--font-serif); font-size:22px; line-height:1.6; }

.author{ display:flex; align-items:center; gap:28px; max-width:1160px; margin:0 auto; }
.author__avatar{ width:72px; height:72px; flex:none; background:linear-gradient(135deg,#2a2024,#0a0a0c); border:1px solid var(--hair-2); display:flex; align-items:center; justify-content:center; font-family:var(--font-serif); font-size:24px; color:var(--accent); overflow:hidden; padding:14px; box-sizing:border-box; }
.author__avatar img{ width:100%; height:100%; object-fit:contain; }
.author__name{ font-family:var(--font-cjk); font-weight:500; font-size:17px; letter-spacing:.06em; }
.author p{ font-family:var(--font-cjk); font-weight:300; font-size:14px; line-height:1.8; letter-spacing:.04em; color:var(--text-3); margin:8px 0 0; max-width:560px; }

.prenext{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; margin-top:46px; padding-top:30px; border-top:1px solid var(--hair); font-size:13px; letter-spacing:.06em; }
.prenext a{ color:var(--text-2); transition:color .3s; }
.prenext a:hover{ color:var(--accent); }

/* ============================================================================
   CASE / PRODUCT DETAIL
   ========================================================================== */
.case-hero{ position:relative; min-height:92vh; min-height:92svh; display:flex; align-items:flex-end; overflow:hidden; }
.case-hero__bg{ position:absolute; inset:0; background:linear-gradient(135deg,#201a1a,#0a0a0c); }
.case-hero__bg img{ width:100%; height:100%; object-fit:cover; }
.case-hero__scan{ position:absolute; inset:0; background-image:var(--scan); }
.case-hero__glow{ position:absolute; inset:0; background:radial-gradient(60% 70% at 70% 30%, rgba(142,26,12,.22), transparent 60%); }
.case-hero__shade{ position:absolute; inset:0; background:linear-gradient(transparent 35%, rgba(0,0,0,.55) 72%, rgba(6,6,8,.95)); }
.case-hero__format{ position:absolute; top:120px; right:var(--gutter); display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.2em; color:var(--text-2); z-index:3; }
.rec-dot{ width:8px; height:8px; border-radius:50%; background:var(--signal-live); display:inline-block; animation:once-rec 1.4s infinite alternate; }
@keyframes once-rec{ 0%{opacity:1} 100%{opacity:.25} }
.case-hero__play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; cursor:pointer; }
.case-hero__inner{ position:relative; z-index:3; width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter) 70px; }
.case-hero__eyebrow{ font-size:11px; letter-spacing:.32em; color:var(--accent); margin-bottom:18px; }
.case-hero h1{ font-family:var(--font-serif); font-weight:500; font-size:clamp(38px,6.6vw,88px); line-height:1.04; letter-spacing:.01em; margin:0; }
.case-hero__cn{ font-family:var(--font-cjk); font-weight:300; font-size:clamp(16px,2vw,22px); letter-spacing:.3em; color:var(--text-2); margin-top:16px; }

.slate{ background:var(--bg-elevated); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.slate__grid{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr); }
.slate__cell{ padding:34px 26px; border-right:1px solid var(--hair); }
.slate__k{ font-size:10px; letter-spacing:.26em; color:var(--accent); margin-bottom:12px; }
.slate__v{ font-family:var(--font-cjk); font-weight:400; font-size:15px; letter-spacing:.06em; line-height:1.6; color:rgba(255,255,255,.85); }

.overview{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:.5fr 1fr; gap:60px; }
.overview__label{ font-size:11px; letter-spacing:.3em; color:var(--accent); }
.overview__lead{ font-family:var(--font-serif); font-weight:400; font-size:clamp(24px,3vw,38px); line-height:1.4; letter-spacing:.01em; color:#fff; margin:0 0 36px; }
.overview__body{ font-family:var(--font-cjk); }
.overview__body p{ font-weight:300; font-size:16px; line-height:2; letter-spacing:.04em; color:var(--text-3); margin:0 0 22px; }

.gallery-wide{ padding:0 var(--gutter) 30px; }
.gallery-wide__frame{ max-width:var(--container); margin:0 auto; position:relative; aspect-ratio:21/9; overflow:hidden; background:linear-gradient(135deg,#1c1c20,#0a0a0c); border:1px solid var(--hair); }
.gallery-wide__frame img{ width:100%; height:100%; object-fit:cover; }
.gallery-wide__frame video,.gallery-wide__frame iframe{ width:100%; height:100%; object-fit:cover; border:0; display:block; }
.gallery-duo{ padding:30px var(--gutter); }
.gallery-duo__grid{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.gallery-cell{ position:relative; aspect-ratio:16/9; overflow:hidden; background:linear-gradient(135deg,#1b1b1f,#0b0b0d); border:1px solid var(--hair); }
.gallery-cell img{ width:100%; height:100%; object-fit:cover; }
.gallery-cell .scan{ position:absolute; inset:0; background-image:var(--scan); }
.gallery-cell__cap{ position:absolute; bottom:16px; left:18px; font-size:10px; letter-spacing:.22em; color:var(--text-4); }

.pullquote{ max-width:1000px; margin:0 auto; text-align:center; }
.pullquote__mark{ font-family:var(--font-serif); font-size:80px; line-height:.5; color:var(--accent); }
/* upright, not italic — CJK has no true italics and synthetic slant looks broken */
.pullquote p{ font-family:var(--font-serif); font-weight:400; font-size:clamp(22px,2.8vw,36px); line-height:1.45; letter-spacing:.01em; color:#fff; margin:0; }
.pullquote cite{ display:block; font-style:normal; font-size:11px; letter-spacing:.26em; color:var(--text-3); margin-top:34px; }

.credits{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:.5fr 1fr; gap:60px; }
.credits__label{ font-size:11px; letter-spacing:.3em; color:var(--accent); }
.credits__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px 60px; }
.credit-row{ display:flex; justify-content:space-between; gap:20px; border-bottom:1px solid var(--hair); padding-bottom:14px; }
.credit-row .role{ font-weight:600; font-size:11px; letter-spacing:.2em; color:var(--text-3); }
.credit-row .name{ font-family:var(--font-cjk); font-weight:400; font-size:14px; letter-spacing:.05em; color:rgba(255,255,255,.85); }

/* ============================================================================
   SERVICES PAGE
   ========================================================================== */
.svc-list{ max-width:var(--container); margin:0 auto; border-top:1px solid var(--hair); }
.svc-row{ display:grid; grid-template-columns:.4fr 1fr 1fr; gap:40px; padding:56px 0; border-bottom:1px solid var(--hair); transition:background .4s; }
.svc-row:hover{ background:rgba(255,255,255,.015); }
.svc-row__no{ font-size:13px; letter-spacing:.2em; color:var(--accent); }
.svc-row__cn{ font-family:var(--font-cjk); font-weight:500; font-size:clamp(26px,3vw,38px); letter-spacing:.04em; margin:0; }
.svc-row__en{ font-weight:600; font-size:11px; letter-spacing:.3em; color:var(--text-3); margin-top:12px; }
.svc-row__desc{ font-family:var(--font-cjk); font-weight:300; font-size:15px; line-height:1.9; letter-spacing:.04em; color:var(--text-3); margin:22px 0 0; max-width:420px; }
.svc-row__items{ display:flex; flex-direction:column; gap:14px; }
.svc-row__item{ display:flex; align-items:center; gap:14px; font-family:var(--font-cjk); font-weight:300; font-size:14px; letter-spacing:.06em; color:var(--text-2); border-bottom:1px solid rgba(255,255,255,.06); padding-bottom:13px; }
.svc-row__item .dot{ width:6px; height:6px; background:var(--accent); flex:none; transform:rotate(45deg); }
.svc-row__link{ min-height:44px; padding:8px 0 13px; transition:color .25s,border-color .25s,background .25s; }
.svc-row__link:hover{ color:#fff; border-color:rgba(255,255,255,.2); }
.svc-row__link:focus-visible,.svc-row__cta:focus-visible,.chip:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.svc-row__cta{ display:inline-flex; margin-top:24px; min-height:44px; align-items:center; font-size:12px; letter-spacing:.16em; color:#fff; }
.svc-row__cta:hover{ color:var(--accent); }
.cform__fieldset{ border:0; margin:0; padding:0; min-width:0; }
.cform__fieldset legend{ display:block; padding:0; font-size:10px; letter-spacing:.24em; color:var(--text-3); }
.cform__note{ margin:0 0 28px; font-family:var(--font-cjk); font-size:12px; line-height:1.8; color:var(--text-4); }
.chip{ min-height:44px; }
.sr-only{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.footer__sub-note{ max-width:360px; margin:10px 0 0!important; font-size:11px!important; line-height:1.6!important; color:var(--text-5)!important; }

.process{ display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--hair); }
.process-cell{ padding:36px 22px 48px; border-right:1px solid var(--hair); min-height:240px; display:flex; flex-direction:column; }
.process-cell__no{ font-family:var(--font-serif); font-size:48px; line-height:1; color:rgba(255,255,255,.14); }
.process-cell__cn{ font-family:var(--font-cjk); font-weight:500; font-size:18px; letter-spacing:.05em; margin-top:auto; }
.process-cell__en{ font-weight:500; font-size:10px; letter-spacing:.28em; color:var(--accent); margin-top:9px; }
.process-cell__desc{ font-family:var(--font-cjk); font-weight:300; font-size:12.5px; line-height:1.8; letter-spacing:.03em; color:var(--text-5); margin:13px 0 0; }

.caps{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:.5fr 1fr; gap:60px; }
.caps__label{ font-size:11px; letter-spacing:.3em; color:var(--accent); }
.caps__list{ display:flex; flex-wrap:wrap; gap:12px; }
.caps__list span{ font-family:var(--font-cjk); font-weight:300; font-size:13.5px; letter-spacing:.08em; color:var(--text-2); border:1px solid var(--hair-2); padding:10px 18px; }

/* ============================================================================
   ABOUT PAGE
   ========================================================================== */
.about-intro{ position:relative; padding:120px var(--gutter) 90px; overflow:hidden; text-align:center; }
.about-intro__glow{ position:absolute; inset:0; background:radial-gradient(70% 90% at 50% 0%, rgba(142,26,12,.16), transparent 58%); }
.about-intro__watermark{ position:absolute; top:40%; left:50%; transform:translate(-50%,-50%); font-family:var(--font-cjk); font-weight:700; font-size:clamp(120px,24vw,360px); letter-spacing:.04em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.06); white-space:nowrap; pointer-events:none; user-select:none; }
.about-intro__inner{ position:relative; max-width:1100px; margin:0 auto; }
.about-intro h1{ font-family:var(--font-serif); font-weight:500; font-size:clamp(34px,4.6vw,64px); line-height:1.18; letter-spacing:.005em; margin:0; }
.about-intro p{ font-family:var(--font-cjk); font-weight:300; font-size:16px; line-height:2; letter-spacing:.05em; color:var(--text-3); margin:34px auto 0; max-width:680px; }

.stats{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:64px 30px; text-align:center; border-right:1px solid var(--hair); }
.stat__num{ font-family:var(--font-serif); font-weight:500; font-size:clamp(38px,4.8vw,70px); line-height:1; letter-spacing:.01em; }
.stat__label{ font-weight:600; font-size:11px; letter-spacing:.26em; color:var(--text-2); margin-top:18px; }
.stat__cn{ font-family:var(--font-cjk); font-weight:300; font-size:13px; letter-spacing:.16em; color:var(--accent); margin-top:8px; }

.story{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:.45fr 1fr; gap:60px; }
.story__label{ font-size:11px; letter-spacing:.3em; color:var(--accent); }
.story__lead{ font-family:var(--font-serif); font-weight:400; font-size:clamp(24px,3vw,36px); line-height:1.4; color:#fff; margin:0 0 32px; }
.story__body{ font-family:var(--font-cjk); }
.story__body p{ font-weight:300; font-size:16px; line-height:2; letter-spacing:.04em; color:var(--text-3); margin:0 0 22px; }
/* first paragraph reads as the lead even when .story__body is filled from the CMS editor
   (raw Content field, no .story__lead class available) — mirrors .prose > p:first-child */
.story__body > p:first-child{ font-family:var(--font-serif); font-weight:400; font-size:clamp(24px,3vw,36px); line-height:1.4; letter-spacing:normal; color:#fff; margin:0 0 32px; }

.values{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--hair); }
.value{ padding:56px 34px 64px; border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.value__no{ font-size:12px; letter-spacing:.2em; color:var(--accent); }
.value__cn{ font-family:var(--font-cjk); font-weight:500; font-size:24px; letter-spacing:.04em; margin:24px 0 6px; }
.value__en{ font-weight:600; font-size:10px; letter-spacing:.28em; color:var(--text-3); }
.value p{ font-family:var(--font-cjk); font-weight:300; font-size:14px; line-height:1.9; letter-spacing:.04em; color:var(--text-3); margin:20px 0 0; }
/* decorative 6th cell that completes the 3×2 values grid with the brand line */
.value--brand{ display:flex; flex-direction:column; justify-content:flex-end; background:radial-gradient(80% 90% at 80% 10%, rgba(142,26,12,.14), transparent 60%); }
.value--brand .value__sign{ font-family:var(--font-cjk); font-weight:300; font-size:17px; letter-spacing:.14em; line-height:1.9; color:var(--text-2); margin:0; }
.value--brand .value__sign b{ color:var(--accent); font-weight:500; }

/* centred card flow — sits well with 1 member or 12, portraits kept modest */
.team{ display:flex; flex-wrap:wrap; justify-content:center; gap:46px 30px; }
.member{ width:232px; }
.member__photo{ position:relative; aspect-ratio:3/4; overflow:hidden; background:linear-gradient(135deg,#1c1c20,#0a0a0c); border:1px solid var(--hair); transition:transform .5s var(--ease); }
.member:hover .member__photo{ transform:translateY(var(--lift)); }
.member__photo::before{ content:''; position:absolute; inset:0; background-image:var(--scan); }
.member__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.member__name{ font-family:var(--font-cjk); font-weight:500; font-size:17px; letter-spacing:.05em; margin-top:18px; }
.member__role{ font-weight:500; font-size:10px; letter-spacing:.24em; color:var(--accent); margin-top:8px; text-transform:uppercase; }
.member__bio{ font-family:var(--font-cjk); font-weight:300; font-size:13px; line-height:1.8; letter-spacing:.03em; color:var(--text-4); margin:10px 0 0; }

/* ============================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-grid{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1.3fr .8fr; gap:80px; align-items:start; }
.cform{ display:flex; flex-direction:column; gap:36px; }
.cform__row{ display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.cform label{ display:block; font-size:10px; letter-spacing:.24em; color:var(--text-3); }
.fld{ width:100%; background:transparent; border:none; border-bottom:1px solid var(--hair-3); outline:none; color:#fff; font-family:var(--font-cjk); font-size:16px; letter-spacing:.04em; padding:14px 2px; transition:border-color .3s; }
.fld:focus{ border-color:var(--accent); }
.fld::placeholder{ color:rgba(255,255,255,.35); }
textarea.fld{ resize:vertical; min-height:120px; }
select.fld option{ background:var(--bg-elevated); color:#fff; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.chip{ background:transparent; color:rgba(255,255,255,.65); border:1px solid var(--hair-2); padding:10px 18px; font-family:var(--font-cjk); font-size:13px; letter-spacing:.06em; cursor:pointer; transition:all .3s; }
.chip.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.cform__captcha{ display:flex; gap:14px; align-items:center; }
.cform__captcha .fld{ flex:1; }
.cform__captcha img{ width:150px; height:54px; cursor:pointer; border:1px solid var(--hair-2); }
.cinfo{ display:flex; flex-direction:column; gap:40px; }
.cinfo__item{ border-top:1px solid var(--hair-2); padding-top:24px; }
.cinfo__k{ font-size:10px; letter-spacing:.26em; color:var(--accent); margin-bottom:14px; }
.cinfo__v{ font-family:var(--font-cjk); font-weight:400; font-size:16px; line-height:1.7; letter-spacing:.04em; color:rgba(255,255,255,.82); }
.cinfo__social{ display:flex; gap:22px; font-size:12px; letter-spacing:.14em; color:var(--text-3); border-top:1px solid var(--hair-2); padding-top:24px; }
.cinfo__social a:hover{ color:#fff; }
.form-success{ border:1px solid rgba(142,26,12,.5); background:rgba(142,26,12,.08); padding:54px 44px; text-align:center; }
.form-success h3{ font-family:var(--font-serif); font-weight:500; font-size:30px; margin:0 0 12px; }
.form-success p{ font-family:var(--font-cjk); font-weight:300; font-size:15px; line-height:1.8; color:var(--text-3); margin:0; }
.contact-map{ position:relative; height:420px; overflow:hidden; background:linear-gradient(135deg,#101014,#070708); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.contact-map__frame{ display:block; width:100%; height:100%; border:0; filter:grayscale(.15) contrast(1.02); }

/* ============================================================================
   CTA band + FOOTER
   ========================================================================== */
.cta{ text-align:center; }
.cta .eyebrow{ display:block; margin-bottom:24px; }
.cta h2{ font-family:var(--font-serif); font-weight:500; font-size:clamp(30px,5.6vw,80px); line-height:1.06; letter-spacing:.01em; margin:0 auto; max-width:1100px; }
.cta__note{ max-width:680px; margin:28px auto 0; font-family:var(--font-cjk); font-weight:300; font-size:15px; line-height:1.9; letter-spacing:.08em; color:var(--text-3); }
.cta__actions{ display:flex; gap:18px; justify-content:center; margin-top:48px; flex-wrap:wrap; }
.section--cta{ padding:128px 0 108px; }
.section--cta-bordered .cta{ border-top:1px solid var(--hair); padding-top:100px; }

.footer{ background:var(--bg); border-top:1px solid var(--hair); }
.footer__cols{ display:grid; grid-template-columns:1.4fr 1fr 1.3fr; gap:60px; padding:70px 0; }
.footer__brand{ display:flex; align-items:baseline; gap:14px; margin-bottom:22px; }
.footer__brand .wordmark{ height:18px; color:var(--paper); }
.footer__brand .wordmark svg{ height:100%; width:auto; }
.footer__brand .cn{ font-family:var(--font-cjk); font-weight:300; font-size:11px; letter-spacing:.42em; color:rgba(255,255,255,.5); }
.footer__blurb{ font-family:var(--font-cjk); font-weight:300; font-size:14px; line-height:1.9; letter-spacing:.05em; color:var(--text-3); max-width:340px; margin:0; }
.footer__contact{ display:flex; flex-direction:column; gap:10px; margin-top:24px; }
.footer__contact a,.footer__contact__line{ display:flex; align-items:baseline; gap:12px; font-size:14px; letter-spacing:.06em; color:var(--text-2); }
.footer__contact a{ transition:color .3s; }
.footer__contact a:hover{ color:#fff; }
.footer__contact__k{ font-size:10px; font-weight:600; letter-spacing:.26em; color:var(--accent); flex:none; min-width:46px; }
.footer__h{ font-weight:600; font-size:11px; letter-spacing:.28em; color:rgba(255,255,255,.85); margin-bottom:24px; }
.footer__links{ display:flex; flex-direction:column; gap:15px; font-family:var(--font-cjk); font-weight:300; font-size:14px; letter-spacing:.06em; }
.footer__links a{ color:var(--text-3); transition:color .3s; }
.footer__links a:hover{ color:#fff; }
.footer__news p{ font-family:var(--font-cjk); font-weight:300; font-size:14px; line-height:1.8; letter-spacing:.05em; color:var(--text-3); margin:0 0 22px; }
.footer__sub{ display:flex; align-items:center; border:1px solid var(--hair-3); max-width:360px; }
.footer__sub input{ flex:1; background:transparent; border:none; outline:none; color:#fff; font-size:13px; letter-spacing:.08em; padding:15px 18px; }
.footer__sub input::placeholder{ color:rgba(255,255,255,.4); }
.footer__sub button{ background:var(--accent); border:none; color:#fff; padding:15px 20px; font-size:15px; cursor:pointer; letter-spacing:.1em; }
.footer__social{ display:flex; align-items:center; gap:18px; margin-top:26px; color:var(--text-3); }
.footer__social a{ display:inline-flex; transition:color .3s; }
.footer__social a:hover{ color:#fff; }
.footer__social svg{ display:block; }
.footer__bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:30px 0 40px; border-top:1px solid var(--hair); font-size:11px; letter-spacing:.16em; color:var(--text-5); }
.footer__bottom a{ color:var(--text-4); }
.footer__bottom a:hover{ color:#fff; }

/* ── Side widget ────────────────────────────────────────────────────────── */
.toolbar{ position:fixed; top:42%; right:0; z-index:60; display:flex; flex-direction:column; box-shadow:0 12px 40px rgba(0,0,0,.45); }
.toolbar a{ width:52px; height:52px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .3s; }
.toolbar__reel{ background:var(--accent); }
.toolbar__reel:hover{ background:var(--accent-hover); }
.toolbar__top{
  /* dark glass to match the theme — the old white-on-white button read as a blank square */
  background:rgba(14,14,16,.92); color:#fff; border:1px solid var(--hair-2);
  backdrop-filter:blur(8px); font-size:18px; line-height:1;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .3s, transform .3s var(--ease), visibility .3s, background .3s;
}
.toolbar__top:hover{ background:var(--accent); border-color:var(--accent); }
.toolbar__top.is-visible{ opacity:1; visibility:visible; transform:none; }

/* ── Showreel lightbox ──────────────────────────────────────────────────── */
.reel{ position:fixed; inset:0; z-index:120; background:rgba(6,6,8,.86); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:40px; animation:once-fade .35s both; }
.reel.is-open{ display:flex; }
.reel__close{ position:absolute; top:30px; right:40px; font-size:12px; letter-spacing:.2em; color:var(--text-2); cursor:pointer; display:flex; align-items:center; gap:10px; }
.reel__close span{ font-size:20px; }
.reel__frame{ width:min(1100px,90vw); aspect-ratio:16/9; background:linear-gradient(135deg,#16161a,#0a0a0c); border:1px solid var(--hair-2); position:relative; display:flex; align-items:center; justify-content:center; }
.reel__frame iframe,.reel__frame video{ width:100%; height:100%; border:0; }
.reel__cap{ position:absolute; top:18px; left:20px; font-size:11px; letter-spacing:.22em; color:var(--text-3); }

/* ── WeChat popover (QR + phone) ────────────────────────────────────────── */
.wechat-card{ position:fixed; inset:0; z-index:130; background:rgba(6,6,8,.86); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:24px; animation:once-fade .35s both; }
.wechat-card.is-open{ display:flex; }
.wechat-card__panel{ position:relative; width:min(320px,92vw); background:linear-gradient(180deg,#141416,#0a0a0c); border:1px solid var(--hair-2); padding:44px 32px 34px; text-align:center; }
.wechat-card__close{ position:absolute; top:14px; right:14px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:none; border:none; color:var(--text-3); font-size:13px; cursor:pointer; transition:color .3s; }
.wechat-card__close:hover{ color:#fff; }
.wechat-card__eyebrow{ font-size:10px; letter-spacing:.26em; color:var(--accent); margin-bottom:22px; }
.wechat-card__qr{ width:168px; height:168px; object-fit:contain; background:#fff; padding:10px; margin:0 auto 22px; display:block; }
.wechat-card__id{ font-family:var(--font-cjk); font-weight:400; font-size:15px; letter-spacing:.05em; color:#fff; margin-bottom:16px; }
.wechat-card__phone{ display:block; font-size:13px; letter-spacing:.08em; color:var(--text-3); border-top:1px solid var(--hair-2); padding-top:16px; transition:color .3s; }
.wechat-card__phone:hover{ color:#fff; }

/* ============================================================================
   PAGINATION
   ========================================================================== */
.pagination{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:74px; }
.pagination a{ min-width:42px; height:42px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--hair-2); font-size:12px; letter-spacing:.12em; color:var(--text-2); transition:all .3s; }
.pagination a:hover{ border-color:#fff; color:#fff; }
.pagination a.current{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pagination .total{ border:none; color:var(--text-5); }

/* ── Featured journal entry ─────────────────────────────────────────────── */
.featured{ display:grid; grid-template-columns:1.2fr 1fr; gap:50px; max-width:var(--container); margin:0 auto; color:#fff; align-items:center; }
.featured__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,#1f1a1a,#0a0a0c); border:1px solid var(--hair); transition:transform .5s var(--ease); }
.featured:hover .featured__media{ transform:translateY(var(--lift)); }
.featured__media::before{ content:''; position:absolute; inset:0; background-image:var(--scan); }
.featured__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.featured__badge{ position:absolute; top:18px; left:20px; font-size:10px; letter-spacing:.24em; color:#fff; background:var(--accent); padding:6px 12px; z-index:2; }
.featured__eyebrow{ font-size:11px; letter-spacing:.22em; color:var(--accent); margin-bottom:18px; }
.featured h2{ font-family:var(--font-serif); font-weight:500; font-size:clamp(26px,3.2vw,44px); line-height:1.16; margin:0; }
.featured__cn{ font-family:var(--font-cjk); font-weight:300; font-size:18px; letter-spacing:.16em; color:var(--text-2); margin-top:14px; }
.featured p{ font-family:var(--font-cjk); font-weight:300; font-size:15px; line-height:1.95; letter-spacing:.04em; color:var(--text-3); margin:24px 0 0; max-width:480px; }
.featured__more{ display:inline-flex; align-items:center; gap:12px; font-weight:600; font-size:12px; letter-spacing:.24em; color:#fff; margin-top:30px; transition:gap .3s; }
.featured:hover .featured__more{ gap:18px; }

/* ── Single page (generic) ──────────────────────────────────────────────── */
.single{ max-width:900px; margin:0 auto; }
.single__title{ font-family:var(--font-serif); font-weight:500; font-size:clamp(34px,5vw,60px); line-height:1.1; margin:0 0 40px; }

/* ── Empty / errors ─────────────────────────────────────────────────────── */
.empty{ text-align:center; color:var(--text-4); padding:80px 0; font-family:var(--font-cjk); letter-spacing:.1em; }
.errpage{ min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:120px 40px; }
.errpage__code{ font-family:var(--font-serif); font-weight:500; font-size:clamp(90px,18vw,220px); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.18); }
.errpage h1{ font-family:var(--font-serif); font-weight:500; font-size:clamp(24px,3vw,40px); margin:18px 0 10px; }
.errpage p{ font-family:var(--font-cjk); font-weight:300; color:var(--text-3); letter-spacing:.06em; margin:0 0 36px; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  :root{ --gutter:32px; }
  /* the full menu + COLLABORATIONS + socials need ~1200px — collapse to the hamburger below 1100 to avoid two-line nav wrapping */
  .nav-menu,.nav-social{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav-right{ gap:14px; }
  .nav.is-open .nav-menu{
    display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(8,8,10,.97); backdrop-filter:blur(14px); border-bottom:1px solid var(--hair); padding:10px 0;
  }
  .nav.is-open .nav-menu > li{ width:100%; }
  .nav.is-open .navlink{ display:block; padding:16px var(--gutter); width:100%; white-space:normal; }
  .nav.is-open .nav-menu .submenu{ position:static; transform:none; opacity:1; visibility:visible; border:none; background:rgba(255,255,255,.03); margin:0; padding:0; }
  .work-grid,.journal-grid{ grid-template-columns:repeat(2,1fr); }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .process{ grid-template-columns:repeat(3,1fr); }
  .slate__grid{ grid-template-columns:repeat(3,1fr); }
  .article-body__grid{ grid-template-columns:minmax(0,1fr); }
  .toc{ position:static; flex-direction:row; flex-wrap:wrap; }
  .featured{ grid-template-columns:1fr; }
  .about-teaser,.about-teaser--home{ grid-template-columns:1fr; }
  .about-signal{ min-height:320px; }
}
@media (max-width:860px){
  .contact-grid,.overview,.credits,.story,.caps{ grid-template-columns:1fr; gap:40px; }
  .svc-row{ grid-template-columns:1fr; gap:20px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .footer__cols{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width:560px){
  :root{ --gutter:20px; }
  .work-grid,.journal-grid,.svc-grid,.process,.slate__grid,.values,.stats{ grid-template-columns:1fr; }
  .work-card__title{ min-height:0; } /* 单列卡片无需对齐相邻卡，避免一标标题下多出空行 */
  .team{ gap:30px 16px; }
  .member{ width:calc(50% - 8px); }
  .svc-card--curated{ min-height:220px; }
  .svc-card--curated .svc-card__cn{ margin-top:36px; }
  .cform__row{ grid-template-columns:1fr; }
  .section{ padding:80px 0; }
  .toolbar{ top:auto; bottom:20px; }
  .footer__sub input{ font-size:16px; } /* <16px would trigger iOS focus zoom */
}

/* ============================================================================
   BEHIND THE SCENES / PURE MASONRY PHOTO WALL
   ========================================================================== */
.behind-header .page-header__glow{ background:radial-gradient(70% 120% at 16% 0%, rgba(142,26,12,.18), transparent 55%), radial-gradient(70% 90% at 86% 14%, rgba(255,255,255,.06), transparent 60%); }
.bts-section{ background:linear-gradient(180deg, var(--bg) 0%, #070708 100%); }
/* CSS-columns fallback (no-JS only) — kept only so a JS-disabled visitor still sees a
   gallery, imperfect column balance and all. Once JS runs it adds .bts-masonry--flex
   (see below) and this rule stops applying. Some docs carry 100+ photos in one gallery,
   so images stay loading="lazy" in the template — the flex layout is what makes that
   safe: a column is a plain vertical stack, so a late-arriving photo only pushes down
   items *below it in its own column* — it can never re-balance or move photos already
   on screen into a different column, which is what caused the original jump. */
.bts-masonry{ column-count:4; column-gap:18px; }
.bts-masonry--photos{ max-width:1480px; margin:0 auto; }
.bts-photo{ display:block; width:100%; break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; margin:0 0 18px; overflow:hidden; border:1px solid rgba(255,255,255,.075); background:#0e0e10; transform:translateZ(0); transition:transform .45s var(--ease), border-color .35s, opacity .35s; }
.bts-photo:hover{ transform:translateY(var(--lift)); border-color:rgba(244,243,241,.22); }
.bts-photo--priority,.bts-photo--secondary{ border-color:rgba(255,255,255,.075); }
.bts-photo img{ display:block; width:100%; height:auto; max-width:100%; object-fit:contain; filter:saturate(.9) contrast(.99); transition:filter .35s, transform .65s var(--ease); }
.bts-photo:hover img{ filter:saturate(1) contrast(1.02); transform:scale(1.018); }
.bts-masonry .empty{ display:block; break-inside:avoid; margin:0; padding:28px; border:1px solid var(--hair); background:rgba(255,255,255,.035); }

@media (max-width:1280px){
  .bts-masonry{ column-count:3; }
}
@media (max-width:860px){
  .bts-masonry{ column-count:2; column-gap:14px; }
  .bts-photo{ margin-bottom:14px; }
}
@media (max-width:560px){
  .bts-masonry{ column-count:1; }
  .bts-photo{ margin-bottom:16px; }
}

/* JS-built masonry — once.js redistributes the flat .bts-photo list into real .bts-col
   stacks and swaps this on. Column count mirrors the breakpoints above (kept in sync
   manually: 4 / 3 / 2 / 1 — see BTS_COLS in once.js). */
.bts-masonry.bts-masonry--flex{ display:flex; align-items:flex-start; column-count:auto; column-gap:0; gap:18px; }
.bts-masonry--flex .bts-col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:18px; }
.bts-masonry--flex .bts-photo{ margin:0; break-inside:auto; }
@media (max-width:860px){ .bts-masonry.bts-masonry--flex{ gap:14px; } .bts-masonry--flex .bts-col{ gap:14px; } }

/* ── Case video block ───────────────────────────────────────────────────── */
.case-video{ padding:70px var(--gutter) 20px; background:var(--bg); scroll-margin-top:90px; }
.case-video__frame{ max-width:var(--container); margin:0 auto; position:relative; overflow:hidden; background:linear-gradient(135deg,#16161a,#08080a); border:1px solid var(--hair); aspect-ratio:16/9; }
.case-video__frame video,.case-video__frame iframe{ display:block; width:100%; height:100%; border:0; object-fit:cover; background:#000; }
.case-video__fallback{ max-width:var(--container); margin:18px auto 0; text-align:center; }
.case-video__fallback a{ font-weight:600; font-size:11px; letter-spacing:.22em; color:var(--accent); text-transform:uppercase; }

/* ============================================================================
   CASE DETAIL / FILM-FIRST PLAYER
   ========================================================================== */
.case-film{
  position:relative; overflow:hidden; padding:24px var(--gutter) 40px;
  background:radial-gradient(80% 70% at 82% 12%, rgba(142,26,12,.18), transparent 58%), linear-gradient(180deg,#070708 0%, #0b0b0d 48%, #08080A 100%);
  border-bottom:1px solid var(--hair);
  scroll-margin-top:86px;
  --case-player-height-safe-max:1480px;
}
.case-film__glow{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(65% 65% at 30% 0%, rgba(255,255,255,.055), transparent 60%); }
.case-film__inner{ position:relative; max-width:var(--container); margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; }
.case-film .back-link{ margin-bottom:8px; }
.case-film__eyebrow{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px; margin:0 0 10px; font-size:10px; letter-spacing:.22em; color:var(--text-3); text-transform:uppercase; }
.case-film__eyebrow span{ display:inline-flex; align-items:center; min-height:24px; padding:5px 10px 4px; border:1px solid var(--hair); background:rgba(255,255,255,.035); }
.case-film__titlebox{ display:flex; flex-direction:column; align-items:center; width:100%; max-width:100%; margin:0 0 12px; }
.case-film__titlebox::after{ content:''; width:64px; height:2px; background:var(--accent); margin-top:8px; }
.case-film h1{ font-family:var(--font-serif); font-weight:500; font-size:clamp(22px,2.8vw,38px); line-height:1.15; letter-spacing:.005em; margin:0; max-width:min(100%,24em); white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; text-wrap:balance; }
.case-film__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:40px; margin-top:22px; }
.case-film__action{ display:flex; flex-direction:column; align-items:center; gap:9px; font-family:inherit; font-size:11px; letter-spacing:.14em; color:var(--text-3); background:none; border:0; padding:0; cursor:pointer; transition:color .3s; text-transform:uppercase; }
.case-film__action svg{ opacity:.75; transition:opacity .3s; }
.case-film__action:hover{ color:#fff; }
.case-film__action:hover svg{ opacity:1; }
.case-film__stage{
  width:100%;
  max-width:1184px;
  max-width:min(100%,1184px,var(--case-player-height-safe-max));
}
.case-film__frame{ position:relative; width:100%; aspect-ratio:var(--case-media-aspect,16/9); overflow:hidden; background:#000; border:1px solid var(--hair-2); box-shadow:0 34px 110px rgba(0,0,0,.44); }
.case-film__frame::before{ display:none; }
.case-film__frame video,.case-film__frame iframe,.case-film__frame img{ position:absolute; inset:0; display:block; width:100%; height:100%; border:0; background:#000; }
.case-film__frame video,.case-film__frame img{ object-fit:contain; }
.case-film__frame iframe{ object-fit:cover; }
.case-film__placeholder{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; color:var(--text-3); background:linear-gradient(135deg,#17171a,#050506); }
.case-film__placeholder span{ font-size:10px; letter-spacing:.28em; color:var(--accent); }
.case-film__placeholder strong{ font-family:var(--font-serif); font-weight:500; font-size:clamp(24px,3vw,44px); color:#fff; max-width:70%; }
.case-facts{ background:var(--bg-elevated); border-bottom:1px solid var(--hair); }
.case-facts__grid{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:auto repeat(4,1fr) auto; align-items:stretch; }
.case-facts__cell{ padding:28px 26px; border-right:1px solid var(--hair); }
.case-facts__mark{ display:flex; align-items:center; justify-content:center; padding:0 26px; font-family:var(--font-serif); font-size:12px; letter-spacing:.2em; color:var(--accent); }
.case-facts__mark--start{ border-left:1px solid var(--hair); }
.case-facts__k{ font-size:10px; letter-spacing:.24em; color:var(--accent); margin-bottom:10px; text-transform:uppercase; }
.case-facts__v{ font-family:var(--font-cjk); font-weight:400; font-size:15px; line-height:1.65; letter-spacing:.05em; color:rgba(255,255,255,.86); }
.case-overview{ padding-top:86px; }
.case-gallery-main{ padding-top:0; }

@media (min-width:1101px){
  .case-film__stage{ max-width:min(100%,80vw,1184px,var(--case-player-height-safe-max)); }
}
@media (min-width:1101px) and (min-height:860px){
  .case-film.is-viewport-docked{
    display:flex;
    min-height:var(--case-film-viewport-height,auto);
    padding-bottom:12px;
  }
  .case-film.is-viewport-docked .case-film__inner{
    width:100%;
    flex:1;
    justify-content:center;
  }
  .case-film.is-viewport-docked .case-film__actions{ margin-top:14px; }
}

@media (max-width:1100px){
  .case-film{ padding-top:32px; }
  .case-facts__grid{ grid-template-columns:repeat(2,1fr); }
  .case-facts__mark{ display:none; }
}
@media (max-width:680px){
  .case-film{ padding:28px var(--gutter) 40px; }
  .case-film__eyebrow{ gap:8px; letter-spacing:.16em; }
  .case-film__actions{ gap:26px; }
  .case-facts__grid{ grid-template-columns:1fr; }
  .case-facts__cell{ border-left:none; border-right:none; border-bottom:1px solid var(--hair); padding:24px var(--gutter); }
}

.work-card__placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1; color:var(--text-4); font-size:11px; letter-spacing:.26em; text-align:center; padding:24px; }

/* ============================================================================
   U-STUDIO BASE PAGE
   ========================================================================== */
.studio-page .nav--transparent{ background:linear-gradient(180deg, rgba(8,8,10,.56), transparent); }
.studio-hero{ position:relative; min-height:96vh; min-height:96svh; display:flex; align-items:flex-end; overflow:hidden; padding:160px var(--gutter) 92px; border-bottom:1px solid var(--hair); background:#050506; }
.studio-hero__media{ position:absolute; inset:0; }
.studio-hero__media img{ width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(1.03) brightness(.72); }
.studio-hero__shade{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,5,6,.92) 0%, rgba(5,5,6,.68) 36%, rgba(5,5,6,.22) 70%, rgba(5,5,6,.72) 100%), linear-gradient(0deg, rgba(8,8,10,.94) 0%, rgba(8,8,10,.36) 46%, rgba(8,8,10,.5) 100%); }
.studio-hero__scan{ position:absolute; inset:0; background-image:var(--scan); opacity:.72; }
.studio-hero__watermark{ position:absolute; right:-2vw; bottom:4vw; font-family:var(--font-serif); font-size:clamp(64px,12vw,190px); line-height:.86; letter-spacing:.02em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.12); pointer-events:none; user-select:none; }
.studio-hero__inner{ position:relative; z-index:1; width:100%; max-width:1220px; }
.studio-hero .eyebrow{ color:rgba(255,255,255,.72); margin-bottom:24px; display:block; }
.studio-hero__title{ font-family:var(--font-serif); font-weight:500; line-height:1; letter-spacing:.005em; margin:0; }
.studio-hero__title-line{ display:block; }
.studio-hero__title-line--latin{ font-size:clamp(44px,6.6vw,104px); line-height:.98; }
.studio-hero__title-line--cn{ font-size:clamp(48px,6.7vw,110px); line-height:.96; letter-spacing:-.025em; white-space:nowrap; word-break:keep-all; }
.studio-hero p{ max-width:720px; margin:30px 0 0; font-family:var(--font-cjk); font-weight:300; font-size:clamp(15px,1.3vw,18px); line-height:1.95; letter-spacing:.025em; color:rgba(255,255,255,.78); }
.studio-hero__scope{ display:flex; flex-wrap:wrap; gap:0; width:max-content; max-width:100%; margin-top:30px; border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); }
.studio-hero__scope span{ position:relative; padding:12px 18px 12px 0; margin-right:18px; font-family:var(--font-cjk); font-size:11px; letter-spacing:.12em; color:rgba(255,255,255,.62); white-space:nowrap; }
.studio-hero__scope span:not(:last-child)::after{ content:''; position:absolute; top:50%; right:0; width:3px; height:3px; border-radius:50%; background:var(--accent); transform:translateY(-50%); }
.studio-hero__actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:36px; }

.studio-facts{ background:var(--bg-elevated); border-bottom:1px solid var(--hair); }
.studio-facts__grid{ max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); }
.studio-fact{ min-height:150px; padding:32px 28px; border-right:1px solid var(--hair); display:flex; flex-direction:column; justify-content:center; }
.studio-fact:first-child{ border-left:1px solid var(--hair); }
.studio-fact__num{ font-family:var(--font-serif); font-weight:500; font-size:clamp(30px,4vw,58px); line-height:1; color:#fff; }
.studio-fact__label{ margin-top:14px; font-family:var(--font-cjk); font-weight:300; font-size:13px; line-height:1.75; letter-spacing:.06em; color:var(--text-3); }

.studio-intro{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; align-items:center; }
.studio-intro__visual{ position:relative; min-height:420px; overflow:hidden; border:1px solid var(--hair); background:#0d0d0f; }
.studio-intro__visual::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 42%, rgba(0,0,0,.66)); pointer-events:none; }
.studio-intro__visual img{ width:100%; height:100%; object-fit:cover; filter:saturate(.86) contrast(1.02) brightness(.82); }
.studio-intro__visual-caption{ position:absolute; left:28px; right:28px; bottom:26px; z-index:1; display:flex; flex-direction:column; gap:8px; }
.studio-intro__visual-caption span{ font-size:10px; letter-spacing:.28em; color:var(--accent); }
.studio-intro__visual-caption strong{ font-family:var(--font-serif); font-weight:500; font-size:clamp(28px,3vw,44px); line-height:1; color:#fff; letter-spacing:.03em; }
.studio-intro__label{ margin-bottom:22px; font-size:11px; letter-spacing:.32em; color:var(--accent); line-height:1.8; }
.studio-intro__body{ font-family:var(--font-cjk); }
.studio-intro__lead{ font-family:var(--font-serif); font-weight:400; font-size:clamp(26px,3.2vw,42px); line-height:1.35; color:#fff; margin:0 0 30px; }
.studio-intro__body p:not(.studio-intro__lead){ font-weight:300; font-size:16px; line-height:2; letter-spacing:.02em; color:var(--text-3); margin:0 0 22px; }
.studio-intro__modes{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:36px; border-top:1px solid var(--hair-2); border-bottom:1px solid var(--hair-2); }
.studio-intro__mode{ min-width:0; padding:20px 18px 22px 0; }
.studio-intro__mode:not(:last-child){ border-right:1px solid var(--hair); margin-right:18px; }
.studio-intro__mode span{ display:block; margin-bottom:14px; font-size:10px; letter-spacing:.18em; color:var(--accent); }
.studio-intro__mode strong,.studio-intro__mode small{ display:block; font-family:var(--font-cjk); }
.studio-intro__mode strong{ font-weight:500; font-size:16px; letter-spacing:.04em; color:#fff; }
.studio-intro__mode small{ margin-top:9px; font-weight:300; font-size:11px; line-height:1.65; letter-spacing:.03em; color:var(--text-4); }

.studio-spaces{ overflow:hidden; }
.studio-scene{ display:grid; grid-template-columns:.76fr 1.24fr; gap:44px; align-items:stretch; margin-bottom:34px; }
.studio-scene__copy{ min-height:420px; border:1px solid var(--hair); padding:34px; background:linear-gradient(135deg, rgba(142,26,12,.08), rgba(255,255,255,.02)); display:flex; flex-direction:column; justify-content:flex-start; }
.studio-scene__thumb{ position:relative; aspect-ratio:16/7; overflow:hidden; margin-bottom:30px; border:1px solid var(--hair); background:#0d0d0f; }
.studio-scene__no,.studio-space-card__no{ font-size:12px; letter-spacing:.24em; color:var(--accent); margin-bottom:22px; }
.studio-scene h3,.studio-space-card h3{ font-family:var(--font-cjk); font-weight:500; font-size:clamp(28px,3.4vw,44px); letter-spacing:.04em; line-height:1.2; margin:0; }
.studio-scene p,.studio-space-card p{ font-family:var(--font-cjk); font-weight:300; font-size:15px; line-height:1.9; letter-spacing:.04em; color:var(--text-3); margin:22px 0 0; }
.studio-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.studio-tags span{ border:1px solid var(--hair-2); padding:9px 13px; font-size:11px; letter-spacing:.16em; color:var(--text-2); }
.studio-scene__media{ position:relative; min-height:420px; overflow:hidden; border:1px solid var(--hair); background:#09090b; }
.studio-scene__media::after,.studio-scene__thumb::after,.studio-space-card__media::after,.studio-gallery figure::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.28)); }
.studio-scene__media img,.studio-scene__thumb img,.studio-space-card__media img,.studio-gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), filter .35s; filter:saturate(.92) contrast(1.01); }
.studio-scene:hover .studio-scene__media img,.studio-scene:hover .studio-scene__thumb img,.studio-space-card:hover .studio-space-card__media img,.studio-gallery figure:hover img{ transform:scale(1.035); filter:saturate(1) contrast(1.02); }

.studio-scene-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.studio-space-card{ border:1px solid var(--hair); background:rgba(255,255,255,.012); transition:transform .45s var(--ease), border-color .35s, background .35s; }
.studio-space-card:hover{ transform:translateY(var(--lift)); border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.02); }
.studio-space-card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#0d0d0f; }
.studio-space-card__copy{ padding:30px 28px 34px; }
.studio-space-card h3{ font-size:clamp(22px,2.1vw,30px); }
.studio-space-card p{ font-size:14px; color:var(--text-3); }

.studio-gallery-section{ background:radial-gradient(80% 100% at 88% 0%, rgba(142,26,12,.12), transparent 54%), var(--bg); }
.studio-gallery{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.studio-gallery figure{ position:relative; overflow:hidden; min-height:250px; margin:0; border:1px solid var(--hair); background:#101012; }
.studio-gallery figure:nth-child(1),.studio-gallery figure:nth-child(4){ grid-column:span 3; min-height:380px; }
.studio-gallery figure:nth-child(2),.studio-gallery figure:nth-child(3),.studio-gallery figure:nth-child(5),.studio-gallery figure:nth-child(6){ grid-column:span 3; }
.studio-gallery figcaption{ position:absolute; left:18px; bottom:16px; z-index:1; font-size:10px; letter-spacing:.24em; color:rgba(255,255,255,.64); }

.studio-use-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--hair); }
.studio-use{ min-height:250px; padding:42px 32px 46px; border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); background:rgba(255,255,255,.012); transition:background .35s; }
.studio-use:hover{ background:rgba(255,255,255,.026); }
.studio-use span{ font-size:11px; letter-spacing:.24em; color:var(--accent); }
.studio-use h3{ font-family:var(--font-cjk); font-weight:500; font-size:23px; letter-spacing:.04em; margin:42px 0 16px; }
.studio-use p{ font-family:var(--font-cjk); font-weight:300; font-size:14px; line-height:1.9; letter-spacing:.04em; color:var(--text-3); margin:0; }
.studio-use-grid--services .studio-use{ position:relative; overflow:hidden; }
.studio-use-grid--services .studio-use::after{ content:''; position:absolute; left:32px; right:32px; bottom:0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.studio-use-grid--services .studio-use:hover::after{ transform:scaleX(1); }
.studio-use-grid--services .studio-use h3{ margin-top:36px; }

.studio-proof-grid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--hair-2); border-bottom:1px solid var(--hair-2); }
.studio-proof{ position:relative; min-height:205px; padding:30px 26px 32px 0; color:#fff; }
.studio-proof:not(:last-child){ border-right:1px solid var(--hair); margin-right:26px; }
.studio-proof span{ font-size:10px; letter-spacing:.2em; color:var(--accent); }
.studio-proof h3{ margin:42px 0 12px; font-family:var(--font-cjk); font-weight:500; font-size:20px; letter-spacing:.03em; }
.studio-proof p{ max-width:240px; margin:0; font-family:var(--font-cjk); font-weight:300; font-size:13px; line-height:1.8; letter-spacing:.02em; color:var(--text-4); }
a.studio-proof::after{ content:'↗'; position:absolute; top:28px; right:26px; font-size:16px; color:var(--text-5); transition:color .3s, transform .3s var(--ease); }
a.studio-proof:hover::after{ color:var(--accent); transform:translate(2px,-2px); }
.studio-evidence-note{ max-width:760px; margin:36px 0 34px; padding-left:16px; border-left:2px solid var(--accent); font-family:var(--font-cjk); font-weight:300; font-size:12px; line-height:1.8; letter-spacing:.02em; color:var(--text-5); }
.work-grid--studio-evidence{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px 22px; }
.work-grid--studio-evidence .work-card__title{ font-family:var(--font-cjk); font-size:14px; letter-spacing:.03em; }
.work-grid--studio-evidence .work-card__cn{ font-size:11px; letter-spacing:.06em; }
.work-grid--studio-evidence .work-card__sub{ font-family:var(--font-cjk); font-size:11px; line-height:1.5; letter-spacing:.05em; }

.studio-booking{ background:linear-gradient(180deg,#08080A 0%, #0f0f12 100%); }
.studio-booking__grid{ display:grid; grid-template-columns:.88fr 1.12fr; gap:64px; align-items:start; }
.studio-booking__copy h2{ font-family:var(--font-serif); font-weight:500; font-size:clamp(34px,4.8vw,64px); line-height:1.12; margin:22px 0 24px; }
.studio-booking__copy p{ font-family:var(--font-cjk); font-weight:300; font-size:15px; line-height:1.95; letter-spacing:.04em; color:var(--text-3); max-width:520px; margin:0; }
.studio-note{ margin-top:26px; padding-left:18px; border-left:2px solid var(--accent); font-family:var(--font-cjk); font-weight:300; font-size:12.5px; line-height:1.8; letter-spacing:.04em; color:var(--text-4); max-width:520px; }
.studio-rate-grid{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--hair); border-left:1px solid var(--hair); }
.studio-rate{ min-height:160px; padding:30px; border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); display:flex; flex-direction:column; justify-content:space-between; background:rgba(255,255,255,.012); }
.studio-rate span{ font-family:var(--font-cjk); font-weight:300; font-size:14px; letter-spacing:.08em; color:var(--text-3); }
.studio-rate strong{ font-family:var(--font-serif); font-weight:500; font-size:clamp(30px,4vw,54px); line-height:1; color:#fff; }
.studio-rate strong small{ font-family:var(--font-cjk); font-weight:300; font-size:12px; letter-spacing:.06em; color:var(--text-4); }
.studio-rate--wide{ grid-column:1 / -1; min-height:132px; flex-direction:row; align-items:flex-end; gap:24px; }
.studio-location{ margin-top:70px; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); display:grid; grid-template-columns:1.2fr .8fr auto; gap:34px; align-items:center; padding:34px 0; }
.studio-location__k{ font-size:10px; letter-spacing:.28em; color:var(--accent); margin-bottom:12px; }
.studio-location__v{ font-family:var(--font-cjk); font-weight:500; font-size:20px; line-height:1.5; letter-spacing:.04em; color:#fff; }
.studio-location p{ font-family:var(--font-cjk); font-weight:300; font-size:13px; line-height:1.8; letter-spacing:.05em; color:var(--text-4); margin:8px 0 0; }
.studio-project-cta .cta h2{ max-width:940px; font-family:var(--font-cjk); font-size:clamp(34px,5vw,68px); line-height:1.22; letter-spacing:-.025em; }
.studio-project-cta .cta__note{ letter-spacing:.03em; }

@media (max-width:1100px){
  .studio-scene,.studio-booking__grid{ grid-template-columns:1fr; }
  .studio-scene-grid,.studio-use-grid{ grid-template-columns:repeat(2,1fr); }
  .studio-proof-grid,.work-grid--studio-evidence{ grid-template-columns:repeat(2,1fr); }
  .studio-proof:nth-child(2){ margin-right:0; border-right:0; }
  .studio-proof:nth-child(-n+2){ border-bottom:1px solid var(--hair); }
  .studio-facts__grid{ grid-template-columns:repeat(2,1fr); }
  .studio-gallery figure:nth-child(n){ grid-column:span 3; }
  .studio-location{ grid-template-columns:1fr; align-items:start; }
}
@media (max-width:860px){
  .studio-hero{ min-height:86vh; min-height:86svh; padding-top:136px; padding-bottom:70px; }
  .studio-hero__shade{ background:linear-gradient(0deg, rgba(8,8,10,.96) 0%, rgba(8,8,10,.62) 52%, rgba(8,8,10,.64) 100%); }
  .studio-hero__title-line--cn{ font-size:clamp(32px,8.3vw,70px); letter-spacing:-.035em; }
  .studio-intro{ grid-template-columns:1fr; gap:34px; }
  .studio-scene__copy,.studio-scene__media{ min-height:340px; }
  .studio-gallery{ grid-template-columns:1fr; }
  .studio-gallery figure:nth-child(n){ grid-column:auto; min-height:260px; }
}
@media (max-width:560px){
  .studio-hero__actions .btn{ width:100%; justify-content:center; }
  .studio-facts__grid,.studio-scene-grid,.studio-use-grid,.studio-rate-grid,.studio-proof-grid,.work-grid--studio-evidence{ grid-template-columns:1fr; }
  .studio-hero__scope{ width:100%; }
  .studio-hero__scope span{ width:50%; margin:0; padding:10px 12px 10px 0; font-size:10px; }
  .studio-hero__scope span:nth-child(2n)::after{ display:none; }
  .studio-fact:first-child{ border-left:none; }
  .studio-fact{ border-right:none; border-bottom:1px solid var(--hair); }
  .studio-hero__title-line--latin{ font-size:clamp(42px,13vw,54px); white-space:nowrap; }
  .studio-hero__title-line--cn{ font-size:clamp(30px,8.2vw,42px); }
  .studio-intro__visual{ min-height:300px; }
  .studio-intro__modes{ grid-template-columns:1fr; }
  .studio-intro__mode{ padding:18px 0; }
  .studio-intro__mode:not(:last-child){ margin-right:0; border-right:0; border-bottom:1px solid var(--hair); }
  .studio-proof{ min-height:0; margin-right:0!important; padding:26px 44px 28px 0; border-right:0!important; border-bottom:1px solid var(--hair)!important; }
  .studio-proof:last-child{ border-bottom:0!important; }
  .studio-proof h3{ margin-top:28px; }
  .work-grid--studio-evidence{ gap:36px; }
  .studio-scene__copy{ padding:26px 22px 30px; }
  .studio-scene__thumb{ margin-bottom:24px; }
  .studio-space-card__copy{ padding:26px 22px 30px; }
  .studio-rate--wide{ grid-column:auto; flex-direction:column; align-items:flex-start; min-height:160px; }
  .studio-location__v{ font-size:17px; }
}

/* ============================================================================
   DISPLAY CAPS — english display headings run uppercase.
   The expanded grotesque is drawn for caps; lowercase reads unfinished at
   display sizes. No effect on hanzi; .02em tracking opens the caps slightly.
   Kept at the end of the file so letter-spacing wins over per-component values.
   ========================================================================== */
.h-display,.h-section,.page-header h1,.article-head h1,.case-film h1,.case-hero h1,
.cta h2,.featured h2,.single__title,.about-teaser h2,.studio-booking__copy h2,.errpage h1{
  text-transform:uppercase; letter-spacing:.02em;
}

/* ONCE controlled UX release 2026-07-14: solutions and progressive galleries */
.solution-capability{ scroll-margin-top:76px; }
.solution-capability__grid{ margin-top:48px; }
.solution-capability__grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.solution-capability__grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.solution-capability__grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.solution-capability__focus{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin-top:48px; border-top:1px solid var(--hair); }
.solution-capability__focus>.svc-card{ border-left:1px solid var(--hair); }
.solution-workflow{ border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:22px 34px; display:grid; align-content:center; }
.solution-workflow__item{ display:grid; grid-template-columns:42px 1fr; gap:18px; align-items:start; padding:20px 0; border-bottom:1px solid var(--hair); }
.solution-workflow__item:last-child{ border-bottom:0; }
.solution-workflow__item span{ color:var(--accent); font-size:11px; letter-spacing:.18em; }
.solution-workflow__item p{ margin:0; color:var(--text-3); font-size:14px; line-height:1.8; }
.solution-detail-header .page-header__inner{ align-items:end; }
.solution-detail-header h1{ max-width:900px; font-size:clamp(38px,5.4vw,72px); line-height:1.12; }
.solution-back-link{ display:inline-block; margin-bottom:34px; }
.solution-detail-header__aside{ max-width:420px; justify-self:end; }
.solution-detail-header__aside p{ color:var(--text-3); line-height:1.9; margin:0 0 28px; }
.cover--solution{ padding-top:0; }
.article-body--solution{ padding-top:76px; }
.prose--solution>p:first-child{ font-size:18px; line-height:1.95; color:var(--text-2); }
.progressive-load{ display:flex; align-items:center; justify-content:center; gap:20px; padding-top:48px; }
.progressive-load[hidden]{ display:none!important; }
.progressive-load__status{ color:var(--text-4); font-size:11px; letter-spacing:.14em; white-space:nowrap; }
.progressive-load .btn{ min-width:180px; }
.work-grid[data-progressive-grid]>.work-card[hidden]{ display:none!important; }
.bts-photo.is-loading{ aspect-ratio:4/3; background:linear-gradient(110deg,#0d0d0f 22%,#151517 38%,#0d0d0f 54%); background-size:200% 100%; animation:bts-loading 1.4s linear infinite; }
.bts-photo.is-loading img{ opacity:0; }
@keyframes bts-loading{ to{ background-position:-200% 0; } }
@media (max-width:980px){
  .solution-capability__grid--3,.solution-capability__grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .solution-detail-header__aside{ justify-self:start; max-width:620px; }
}
@media (max-width:560px){
  .solution-capability__grid--2,.solution-capability__grid--3,.solution-capability__grid--4,.solution-capability__focus{ grid-template-columns:1fr; }
  .solution-workflow{ border-left:1px solid var(--hair); padding:14px 24px; }
  .solution-detail-header h1{ font-size:clamp(34px,11vw,50px); }
  .solution-back-link{ margin-bottom:24px; }
  .progressive-load{ flex-direction:column; gap:12px; padding-top:36px; }
  .bts-masonry{ column-count:2; column-gap:10px; }
  .bts-masonry.bts-masonry--flex{ gap:10px; }
  .bts-masonry--flex .bts-col{ gap:10px; }
}
@media (max-width:339px){
  .bts-masonry{ column-count:1; }
}

/* ONCE SOLUTION SALES RELEASE 20260728 START */
.once-sales-page .once-sales-hero {
  position: relative;
  display: grid;
  min-height: min(820px, calc(100svh - 80px));
  overflow: hidden;
  isolation: isolate;
  background: #08080a;
  color: #f4f3f1;
}

.once-sales-page .once-sales-hero__media,
.once-sales-page .once-sales-hero__media::before,
.once-sales-page .once-sales-hero__media::after {
  position: absolute;
  inset: 0;
}

.once-sales-page .once-sales-hero__media {
  z-index: -2;
  margin: 0;
}

.once-sales-page .once-sales-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
  filter: saturate(.9) contrast(1.04);
}

.once-sales-page .once-sales-hero--224 .once-sales-hero__media img { object-position: center 42%; }
.once-sales-page .once-sales-hero--225 .once-sales-hero__media img { object-position: center 45%; }
.once-sales-page .once-sales-hero--226 .once-sales-hero__media img { object-position: center 42%; }
.once-sales-page .once-sales-hero--227 .once-sales-hero__media img { object-position: center 36%; }
.once-sales-page .once-sales-hero--228 .once-sales-hero__media img { object-position: center 50%; }
.once-sales-page .once-sales-hero--229 .once-sales-hero__media img { object-position: center 45%; }
.once-sales-page .once-sales-hero--230 .once-sales-hero__media img { object-position: center 44%; }
.once-sales-page .once-sales-hero--231 .once-sales-hero__media img {
  object-position: center 42%;
  transform: scaleX(-1);
}
.once-sales-page .once-sales-hero--232 .once-sales-hero__media img { object-position: center 43%; }
.once-sales-page .once-sales-hero--233 .once-sales-hero__media img { object-position: center 45%; }

.once-sales-page .once-sales-hero__media::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,8,10,.98) 0%, rgba(8,8,10,.9) 35%, rgba(8,8,10,.46) 61%, rgba(8,8,10,.12) 100%),
    linear-gradient(180deg, rgba(8,8,10,.28), transparent 42%, rgba(8,8,10,.56));
  content: "";
}

.once-sales-page .once-sales-hero__media::after {
  z-index: 2;
  background: radial-gradient(circle at 76% 48%, rgba(176,38,18,.2), transparent 38%);
  content: "";
}

.once-sales-page .once-sales-hero__inner {
  width: min(100%, 1480px);
  margin-inline: auto;
  padding: clamp(66px, 7vw, 110px) clamp(22px, 3.9vw, 58px);
  align-self: center;
}

.once-sales-page .once-sales-hero__copy {
  max-width: 720px;
}

.once-sales-page .once-sales-hero__back {
  display: inline-flex;
  margin-bottom: clamp(36px, 5vw, 72px);
  color: rgba(255,255,255,.56);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.once-sales-page .once-sales-hero__back:hover,
.once-sales-page .once-sales-hero__back:focus-visible {
  color: #fff;
}

.once-sales-page .once-sales-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #ed563d;
  font-family: var(--font-display, "Anybody Expanded", "Arial Narrow", Arial, sans-serif);
  font-size: 10px;
  letter-spacing: .18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.once-sales-page .once-sales-kicker::before {
  width: 26px;
  height: 1px;
  flex: 0 0 auto;
  background: currentColor;
  content: "";
}

.once-sales-page .once-sales-hero h1 {
  max-width: 900px;
  margin: 22px 0 22px;
  color: #fff;
  font-size: clamp(48px, 5.25vw, 80px);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: 1.08;
}

.once-sales-page .once-sales-hero__lead {
  max-width: 650px;
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: clamp(16px, 1.18vw, 19px);
  line-height: 1.88;
}

.once-sales-page .once-sales-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.once-sales-page .once-sales-button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: border-color .2s ease, background .2s ease;
}

.once-sales-page .once-sales-button:hover,
.once-sales-page .once-sales-button:focus-visible {
  border-color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.07);
}

.once-sales-page .once-sales-button--primary {
  border-color: #b42410;
  background: #b42410;
}

.once-sales-page .once-sales-button--primary:hover,
.once-sales-page .once-sales-button--primary:focus-visible {
  border-color: #d8412a;
  background: #d8412a;
}

.once-sales-page .once-sales-hero__note {
  position: absolute;
  z-index: 4;
  right: clamp(22px, 3.9vw, 58px);
  bottom: 42px;
  max-width: 260px;
  color: rgba(255,255,255,.52);
  font-size: 10px;
  letter-spacing: .08em;
  text-align: right;
  text-transform: uppercase;
}

.once-sales-page .once-sales-body,
.once-sales-page .once-sales-body * {
  box-sizing: border-box;
}

.once-sales-page .once-sales-body {
  --once-sales-bg: #08080a;
  --once-sales-surface: #101012;
  --once-sales-paper: #f2f0ec;
  --once-sales-ink: #f4f3f1;
  --once-sales-dark: #111113;
  --once-sales-muted: rgba(244,243,241,.68);
  --once-sales-soft: rgba(244,243,241,.46);
  --once-sales-line: rgba(244,243,241,.15);
  --once-sales-line-dark: rgba(17,17,19,.18);
  --once-sales-accent: #ed563d;
  background: var(--once-sales-bg);
  color: var(--once-sales-ink);
}

.once-sales-page .once-sales-body a {
  color: inherit;
  text-decoration: none;
}

.once-sales-page .once-sales-body img,
.once-sales-page .once-sales-body video {
  display: block;
  width: 100%;
  max-width: 100%;
}

.once-sales-page .once-sales-container {
  width: min(100%, 1480px);
  margin-inline: auto;
  padding-inline: clamp(22px, 3.9vw, 58px);
}

.once-sales-page .once-sales-decision {
  border-block: 1px solid var(--once-sales-line);
  background: var(--once-sales-surface);
}

.once-sales-page .once-sales-decision__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.once-sales-page .once-sales-decision__item {
  min-height: 148px;
  padding: 27px clamp(21px, 2.3vw, 36px);
  border-right: 1px solid var(--once-sales-line);
}

.once-sales-page .once-sales-decision__item:last-child {
  border-right: 0;
}

.once-sales-page .once-sales-decision__item span {
  display: block;
  margin-bottom: 16px;
  color: var(--once-sales-accent);
  font-family: var(--font-display, "Anybody Expanded", "Arial Narrow", Arial, sans-serif);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.once-sales-page .once-sales-decision__item strong {
  display: block;
  max-width: 280px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.58;
}

.once-sales-page .once-sales-section {
  padding-block: clamp(82px, 8.5vw, 136px);
}

.once-sales-page .once-sales-section--surface {
  background: var(--once-sales-surface);
}

.once-sales-page .once-sales-section--paper {
  background: var(--once-sales-paper);
  color: var(--once-sales-dark);
}

.once-sales-page .once-sales-section__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
  gap: clamp(44px, 7vw, 110px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 82px);
}

.once-sales-page .once-sales-section__head h2 {
  max-width: 980px;
  margin: 18px 0 0;
  font-size: clamp(43px, 4.5vw, 68px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1.04;
}

.once-sales-page .once-sales-section__head > p {
  margin: 0;
  color: var(--once-sales-muted);
  font-size: 15px;
}

.once-sales-page .once-sales-section--paper .once-sales-section__head > p {
  color: rgba(17,17,19,.64);
}

.once-sales-page .once-sales-feature {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(300px, 4fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}

.once-sales-page .once-sales-feature__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--once-sales-line);
  background: #030304;
}

.once-sales-page .once-sales-feature__media video {
  height: 100%;
  object-fit: cover;
}

.once-sales-page .once-sales-media-label {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.34);
  background: rgba(8,8,10,.58);
  font-family: var(--font-display, "Anybody Expanded", "Arial Narrow", Arial, sans-serif);
  font-size: 8px;
  letter-spacing: .15em;
  pointer-events: none;
}

.once-sales-page .once-sales-feature__copy h3 {
  margin: 18px 0 24px;
  font-size: clamp(30px, 3vw, 47px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.15;
}

.once-sales-page .once-sales-feature__copy > p {
  color: var(--once-sales-muted);
}

.once-sales-page .once-sales-facts {
  margin: 32px 0;
  padding: 0;
  border-top: 1px solid var(--once-sales-line);
  list-style: none;
}

.once-sales-page .once-sales-facts li {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--once-sales-line);
  font-size: 14px;
}

.once-sales-page .once-sales-facts span {
  color: var(--once-sales-soft);
}

.once-sales-page .once-sales-scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--once-sales-line);
}

.once-sales-page .once-sales-scope__column {
  min-width: 0;
  padding-top: 30px;
}

.once-sales-page .once-sales-scope__column:first-child {
  padding-right: clamp(28px, 4vw, 64px);
  border-right: 1px solid var(--once-sales-line);
}

.once-sales-page .once-sales-scope__column:last-child {
  padding-left: clamp(28px, 4vw, 64px);
}

.once-sales-page .once-sales-scope__column h3 {
  margin: 0 0 28px;
  font-family: var(--font-display, "Anybody Expanded", "Arial Narrow", Arial, sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.once-sales-page .once-sales-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.once-sales-page .once-sales-list li {
  position: relative;
  padding: 18px 0 18px 31px;
  border-top: 1px solid var(--once-sales-line);
  color: var(--once-sales-muted);
  font-size: 15px;
}

.once-sales-page .once-sales-list li::before {
  position: absolute;
  top: 24px;
  left: 2px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--once-sales-accent);
  content: "";
}

.once-sales-page .once-sales-list li:last-child {
  border-bottom: 1px solid var(--once-sales-line);
}

.once-sales-page .once-sales-process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--once-sales-line);
}

.once-sales-page .once-sales-process__item {
  min-height: 310px;
  padding: 28px 24px 36px;
  border-right: 1px solid var(--once-sales-line);
}

.once-sales-page .once-sales-process__item:last-child {
  border-right: 0;
}

.once-sales-page .once-sales-process__number {
  display: block;
  margin-bottom: 80px;
  color: var(--once-sales-accent);
  font-family: var(--font-display, "Anybody Expanded", "Arial Narrow", Arial, sans-serif);
  font-size: 10px;
  letter-spacing: .15em;
}

.once-sales-page .once-sales-process__item h3 {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 500;
}

.once-sales-page .once-sales-process__item p {
  margin: 0;
  color: var(--once-sales-muted);
  font-size: 14px;
}

.once-sales-page .once-sales-cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 42px);
}

.once-sales-page .once-sales-case {
  min-width: 0;
}

.once-sales-page .once-sales-case__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #151518;
}

.once-sales-page .once-sales-case__media::after {
  position: absolute;
  inset: 0;
  border: 1px solid var(--once-sales-line);
  box-shadow: inset 0 -110px 90px -70px rgba(0,0,0,.9);
  content: "";
  pointer-events: none;
}

.once-sales-page .once-sales-case img {
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.22,1,.36,1), filter .3s ease;
}

.once-sales-page .once-sales-case:hover img {
  transform: scale(1.025);
  filter: saturate(1.08);
}

.once-sales-page .once-sales-case__index {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(8,8,10,.52);
  font-family: var(--font-display, "Anybody Expanded", "Arial Narrow", Arial, sans-serif);
  font-size: 8px;
  letter-spacing: .15em;
}

.once-sales-page .once-sales-case__body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  padding: 20px 0 4px;
  border-bottom: 1px solid var(--once-sales-line);
}

.once-sales-page .once-sales-case h3 {
  margin: 0;
  font-size: clamp(19px, 1.8vw, 27px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.35;
}

.once-sales-page .once-sales-case__body span {
  color: var(--once-sales-soft);
  font-family: var(--font-display, "Anybody Expanded", "Arial Narrow", Arial, sans-serif);
  font-size: 10px;
}

.once-sales-page .once-sales-guide {
  display: grid;
  grid-template-columns: minmax(250px, 4fr) minmax(0, 8fr);
  gap: clamp(48px, 8vw, 130px);
  align-items: start;
}

.once-sales-page .once-sales-guide__intro {
  position: sticky;
  top: 116px;
}

.once-sales-page .once-sales-guide__intro h2 {
  margin: 18px 0 20px;
  font-size: clamp(41px, 4.2vw, 66px);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: 1.03;
}

.once-sales-page .once-sales-guide__intro > p {
  color: rgba(17,17,19,.62);
}

.once-sales-page .once-sales-guide__articles article {
  padding: 0 0 46px;
  margin-bottom: 46px;
  border-bottom: 1px solid var(--once-sales-line-dark);
}

.once-sales-page .once-sales-guide__articles article:last-child {
  margin-bottom: 0;
}

.once-sales-page .once-sales-guide__articles span {
  color: rgba(17,17,19,.48);
  font-family: var(--font-display, "Anybody Expanded", "Arial Narrow", Arial, sans-serif);
  font-size: 10px;
  letter-spacing: .15em;
}

.once-sales-page .once-sales-guide__articles h3 {
  max-width: 850px;
  margin: 12px 0 20px;
  font-size: clamp(24px, 2.5vw, 35px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.32;
}

.once-sales-page .once-sales-guide__articles p {
  max-width: 780px;
  margin: 0;
  color: rgba(17,17,19,.7);
}

.once-sales-page .once-sales-faq {
  max-width: 1100px;
  margin-left: auto;
  border-top: 1px solid var(--once-sales-line);
}

.once-sales-page .once-sales-faq details {
  border-bottom: 1px solid var(--once-sales-line);
}

.once-sales-page .once-sales-faq summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
  min-height: 90px;
  padding: 20px 0;
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.once-sales-page .once-sales-faq summary::-webkit-details-marker {
  display: none;
}

.once-sales-page .once-sales-faq summary::after {
  color: var(--once-sales-accent);
  font-size: 22px;
  content: "+";
}

.once-sales-page .once-sales-faq details[open] summary::after {
  content: "−";
}

.once-sales-page .once-sales-faq p {
  max-width: 820px;
  margin: 0;
  padding: 0 54px 30px 0;
  color: var(--once-sales-muted);
}

.once-sales-page .once-sales-related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--once-sales-line);
}

.once-sales-page .once-sales-related__card {
  position: relative;
  min-height: 250px;
  padding: 28px;
  border-right: 1px solid var(--once-sales-line);
  transition: background .25s ease;
}

.once-sales-page .once-sales-related__card:last-child {
  border-right: 0;
}

.once-sales-page .once-sales-related__card:hover,
.once-sales-page .once-sales-related__card:focus-visible {
  background: #151518;
}

.once-sales-page .once-sales-related__card > span {
  color: var(--once-sales-soft);
  font-family: var(--font-display, "Anybody Expanded", "Arial Narrow", Arial, sans-serif);
  font-size: 9px;
  letter-spacing: .14em;
}

.once-sales-page .once-sales-related__card h3 {
  max-width: 330px;
  margin: 64px 0 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
}

.once-sales-page .once-sales-related__card small {
  display: block;
  max-width: 310px;
  margin-top: 14px;
  padding-right: 30px;
  color: var(--once-sales-muted);
  font-size: 13px;
  line-height: 1.65;
}

.once-sales-page .once-sales-related__card::after {
  position: absolute;
  right: 28px;
  bottom: 26px;
  color: var(--once-sales-accent);
  font-size: 20px;
  content: "↗";
}

.once-sales-page .once-sales-contact {
  padding-block: clamp(90px, 10vw, 160px);
  background:
    linear-gradient(90deg, rgba(8,8,10,.96), rgba(8,8,10,.72)),
    radial-gradient(circle at 82% 35%, rgba(184,45,24,.34), transparent 36%),
    #111;
}

.once-sales-page .once-sales-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(280px, 4fr);
  gap: clamp(42px, 8vw, 120px);
  align-items: end;
}

.once-sales-page .once-sales-contact h2 {
  max-width: 900px;
  margin: 18px 0 0;
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: 1.02;
}

.once-sales-page .once-sales-contact p {
  margin: 0 0 26px;
  color: var(--once-sales-muted);
}

@media (max-width: 1080px) {
  .once-sales-page .once-sales-decision__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .once-sales-page .once-sales-decision__item:nth-child(2) { border-right: 0; }
  .once-sales-page .once-sales-decision__item:nth-child(-n + 2) { border-bottom: 1px solid var(--once-sales-line); }
  .once-sales-page .once-sales-process { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .once-sales-page .once-sales-process__item:nth-child(3) { border-right: 0; }
  .once-sales-page .once-sales-process__item:nth-child(-n + 3) { border-bottom: 1px solid var(--once-sales-line); }
}

@media (max-width: 780px) {
  .once-sales-page .once-sales-hero {
    min-height: calc(100svh - 72px);
  }
  .once-sales-page .once-sales-hero__inner {
    align-self: end;
    padding-block: 42px 62px;
  }
  .once-sales-page .once-sales-hero__media::before {
    background:
      linear-gradient(180deg, rgba(8,8,10,.48), rgba(8,8,10,.7) 44%, rgba(8,8,10,.97)),
      linear-gradient(90deg, rgba(8,8,10,.42), rgba(8,8,10,.12));
  }
  .once-sales-page .once-sales-hero__media img {
    object-position: 62% 36% !important;
    filter: saturate(.84) contrast(1.03) brightness(.92);
  }
  .once-sales-page .once-sales-hero--231 .once-sales-hero__media img { transform: none; }
  .once-sales-page .once-sales-hero__back { margin-bottom: 30px; }
  .once-sales-page .once-sales-hero h1 {
    margin: 18px 0 16px;
    font-size: clamp(38px, 11vw, 49px);
    line-height: 1.12;
  }
  .once-sales-page .once-sales-hero__lead {
    font-size: 15px;
    line-height: 1.78;
  }
  .once-sales-page .once-sales-hero__actions {
    display: grid;
    margin-top: 29px;
  }
  .once-sales-page .once-sales-button { width: 100%; }
  .once-sales-page .once-sales-hero__note {
    right: 18px;
    bottom: 14px;
    max-width: calc(100% - 36px);
    font-size: 8px;
  }
  .once-sales-page .once-sales-decision__item {
    min-height: 146px;
    padding: 23px 19px;
  }
  .once-sales-page .once-sales-decision__item strong { font-size: 14px; }
  .once-sales-page .once-sales-section__head,
.once-sales-page .once-sales-feature,
.once-sales-page .once-sales-guide,
.once-sales-page .once-sales-contact__grid {
    grid-template-columns: 1fr;
  }
  .once-sales-page .once-sales-section__head {
    gap: 24px;
    margin-bottom: 42px;
  }
  .once-sales-page .once-sales-section__head h2 { font-size: clamp(38px, 11vw, 50px); }
  .once-sales-page .once-sales-feature { gap: 34px; }
  .once-sales-page .once-sales-feature__copy h3 { font-size: 29px; }
  .once-sales-page .once-sales-scope {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .once-sales-page .once-sales-scope__column:first-child {
    padding-right: 0;
    border-right: 0;
  }
  .once-sales-page .once-sales-scope__column:last-child { padding-left: 0; }
  .once-sales-page .once-sales-cases { grid-template-columns: 1fr; }
  .once-sales-page .once-sales-process { grid-template-columns: 1fr; }
  .once-sales-page .once-sales-process__item,
.once-sales-page .once-sales-process__item:nth-child(3) {
    min-height: auto;
    padding: 24px 0 34px;
    border-right: 0;
    border-bottom: 1px solid var(--once-sales-line);
  }
  .once-sales-page .once-sales-process__number { margin-bottom: 36px; }
  .once-sales-page .once-sales-guide__intro { position: static; }
  .once-sales-page .once-sales-guide__intro h2 { font-size: 46px; }
  .once-sales-page .once-sales-guide__articles article {
    padding-bottom: 34px;
    margin-bottom: 34px;
  }
  .once-sales-page .once-sales-related { grid-template-columns: 1fr; }
  .once-sales-page .once-sales-related__card {
    min-height: 200px;
    border-right: 0;
    border-bottom: 1px solid var(--once-sales-line);
  }
  .once-sales-page .once-sales-contact h2 { font-size: clamp(47px, 13vw, 64px); }
}

@media (max-width: 390px) {
  .once-sales-page .once-sales-decision__item {
    min-height: 142px;
    padding: 21px 16px;
  }
  .once-sales-page .once-sales-decision__item span { font-size: 8px; }
  .once-sales-page .once-sales-decision__item strong { font-size: 13px; }
}

@media (min-width: 900px) and (max-height: 760px) {
  .once-sales-page .once-sales-hero { min-height: 640px; }
  .once-sales-page .once-sales-hero__inner { padding-block: 48px; }
  .once-sales-page .once-sales-hero__back { margin-bottom: 30px; }
  .once-sales-page .once-sales-hero h1 { font-size: clamp(45px, 4.8vw, 68px); }
  .once-sales-page .once-sales-hero__actions { margin-top: 26px; }
  .once-sales-page .once-sales-decision__item {
    min-height: 126px;
    padding-block: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .once-sales-page .once-sales-body *,
.once-sales-page .once-sales-body *::before,
.once-sales-page .once-sales-body *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}
/* ONCE SOLUTION SALES RELEASE 20260728 END */
/* ONCE PROJECT SERVICES FOOTER 2026-08-01: START */
.footer__cols--growth{grid-template-columns:minmax(280px,1.25fr) minmax(130px,.58fr) minmax(230px,1.12fr) minmax(280px,1fr);gap:clamp(28px,3.2vw,52px)}
.footer__cols--growth>div{min-width:0}
.footer__growth .footer__h{margin-bottom:0}
.footer__utility-links{display:grid;gap:5px;margin-top:17px;font-family:var(--font-cjk)}
.footer__utility-links a{display:grid;grid-template-columns:24px minmax(0,1fr);gap:7px;min-height:24px;align-items:baseline;color:var(--text-3);font-size:11px;font-weight:300;line-height:1.5;letter-spacing:.035em;transition:color .2s,transform .2s}
.footer__utility-links a span{color:var(--signal-live);font-family:var(--font-display);font-size:7px;letter-spacing:.1em}
.footer__utility-links a:hover,.footer__utility-links a:focus-visible{color:#fff;transform:translateX(3px)}
@media(max-width:1100px){.footer__cols--growth{grid-template-columns:repeat(2,minmax(0,1fr));gap:46px 36px}.footer__cols--growth .footer__identity,.footer__cols--growth .footer__news{grid-column:1/-1}}
@media(max-width:560px){.footer__cols--growth{grid-template-columns:1fr;gap:38px;padding-block:48px 54px}.footer__cols--growth .footer__identity,.footer__cols--growth .footer__news{grid-column:auto}.footer__cols--growth .footer__studio,.footer__cols--growth .footer__growth,.footer__cols--growth .footer__news{padding-top:26px;border-top:1px solid var(--hair)}.footer__utility-links a{min-height:30px;font-size:12px}}
/* ONCE PROJECT SERVICES FOOTER 2026-08-01: END */

/* ONCE CONTACT LOOP BACKDROP 2026-08-01 */
.once-loop-panel{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:#07080a;
  background-image:
    linear-gradient(180deg,rgba(4,5,7,.64) 0%,rgba(4,5,7,.72) 48%,rgba(4,5,7,.88) 100%),
    linear-gradient(90deg,rgba(4,5,7,.78) 0%,rgba(4,5,7,.34) 50%,rgba(4,5,7,.74) 100%),
    url("https://once-1253477534.cos.ap-guangzhou.myqcloud.com/uploads/202608/01/6970500ad5bef297.webp");
  background-position:center 52%;
  background-size:cover;
}
.once-loop-panel::before{
  position:absolute;
  z-index:0;
  inset:0;
  background:radial-gradient(70% 90% at 50% 30%,rgba(184,45,24,.08),transparent 68%);
  content:"";
  pointer-events:none;
}
.once-loop-panel .container{position:relative;z-index:1;}
.once-loop-panel .section-head{text-shadow:0 2px 24px rgba(0,0,0,.72);}
.once-loop-panel .process{border-top:0;gap:clamp(12px,1.5vw,26px);}
.once-loop-panel .process-cell{
  display:grid;
  grid-template-rows:64px 28px 22px auto;
  align-content:start;
  min-height:248px;
  padding:34px clamp(10px,1.4vw,22px) 40px;
  border-right:0;
  text-shadow:0 2px 16px rgba(0,0,0,.82);
}
.once-loop-panel .process-cell__no{color:rgba(255,255,255,.22);}
.once-loop-panel .process-cell__cn{align-self:end;margin-top:0;}
.once-loop-panel .process-cell__en{margin-top:7px;}
.once-loop-panel .process-cell__desc{margin-top:13px;color:rgba(255,255,255,.63);}

@media (max-width:900px){
  .once-loop-panel{background-position:58% 50%;}
}
@media (max-width:560px){
  .once-loop-panel{
    background-image:
      linear-gradient(180deg,rgba(4,5,7,.74),rgba(4,5,7,.88)),
      linear-gradient(90deg,rgba(4,5,7,.80),rgba(4,5,7,.54)),
      url("https://once-1253477534.cos.ap-guangzhou.myqcloud.com/uploads/202608/01/6970500ad5bef297.webp");
    background-position:58% 50%;
  }
  .once-loop-panel .process{gap:0;}
  .once-loop-panel .process-cell{
    grid-template-columns:52px minmax(0,1fr);
    grid-template-rows:auto auto auto;
    column-gap:14px;
    min-height:0;
    padding:24px 0;
  }
  .once-loop-panel .process-cell__no{
    grid-row:1 / 4;
    font-size:34px;
  }
  .once-loop-panel .process-cell__cn{align-self:start;}
  .once-loop-panel .process-cell__en{margin-top:5px;}
  .once-loop-panel .process-cell__desc{margin-top:9px;}
}

/* ONCE HOME JOURNAL AND FOOTER TYPE 2026-08-15: START */
.once-journal-section .journal-grid {
  margin-bottom: clamp(64px, 6vw, 96px);
}

.footer__utility-links a {
  font-size: 14px;
  letter-spacing: 0.06em;
}

.journal-more {
  --journal-more-line: rgba(255, 255, 255, 0.13);
  --journal-more-muted: rgba(255, 255, 255, 0.56);
  --journal-more-title: rgba(255, 255, 255, 0.78);
}

.journal-more__head {
  display: flex;
  gap: 28px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: clamp(22px, 2.4vw, 34px);
}

.journal-more__heading {
  margin: 0;
  color: #f5f3ef;
  font-family: var(--font-serif);
  font-size: clamp(21px, 1.7vw, 28px);
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.35;
}

.journal-more__all {
  display: inline-flex;
  align-items: center;
  color: var(--journal-more-muted);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.journal-more__all {
  gap: 12px;
  min-height: 44px;
  padding-inline: 4px;
  transition: color 220ms ease;
}

.journal-more__arrow {
  position: relative;
  width: 32px;
  height: 10px;
  flex: 0 0 auto;
}

.journal-more__arrow::before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  content: '';
  transform: scaleX(0.72);
  transform-origin: right center;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.journal-more__arrow::after {
  position: absolute;
  top: 2px;
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  content: '';
  transform: rotate(45deg);
}

.journal-more__all:hover,
.journal-more__all:focus-visible {
  color: var(--accent);
}

.journal-more__all:hover .journal-more__arrow::before,
.journal-more__all:focus-visible .journal-more__arrow::before {
  transform: scaleX(1);
}

.journal-more__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 44px;
}

.journal-more__column {
  min-width: 0;
}

.journal-more__topic-head {
  display: flex;
  min-height: 58px;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}

.journal-more__topic {
  display: inline-flex;
  gap: 11px;
  align-items: center;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-cjk);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.35;
}

.journal-more__topic-mark {
  width: 2px;
  height: 12px;
  flex: 0 0 auto;
  background: var(--accent);
}

.journal-more__topic-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--journal-more-muted);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.14em;
  line-height: 1;
  transition: color 220ms ease;
}

.journal-more__topic-link:hover,
.journal-more__topic-link:focus-visible {
  color: var(--accent);
}

.journal-more__topic-link:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

.journal-more__list {
  border-top: 1px solid var(--journal-more-line);
  padding-block: 6px;
}

.journal-more__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 48px;
  gap: 14px;
  align-items: center;
  padding: 8px 7px 8px 0;
  color: inherit;
}

.journal-more__item:focus-visible,
.journal-more__all:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 5px;
}

.journal-more__title {
  overflow: hidden;
  margin: 0;
  color: var(--journal-more-title);
  font-family: var(--font-cjk);
  font-size: clamp(13px, 0.95vw, 15px);
  font-weight: 300;
  letter-spacing: 0.015em;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 220ms ease;
}

.journal-more__item:hover .journal-more__title,
.journal-more__item:focus-visible .journal-more__title {
  color: #fff;
}

.journal-more__item-arrow {
  width: 5px;
  height: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  transform: rotate(45deg);
  transition: border-color 220ms ease, transform 220ms ease;
}

.journal-more__item:hover .journal-more__item-arrow,
.journal-more__item:focus-visible .journal-more__item-arrow {
  border-color: var(--accent);
  transform: translateX(2px) rotate(45deg);
}

@media (max-width: 1020px) {
  .journal-more__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 44px;
  }
}

@media (max-width: 560px) {
  .once-journal-section .journal-grid {
    margin-bottom: 58px;
  }

  .journal-more__head {
    display: grid;
    gap: 10px;
    align-items: start;
    margin-bottom: 22px;
  }

  .journal-more__heading {
    max-width: 12em;
    font-size: 22px;
  }

  .journal-more__all {
    width: max-content;
    min-height: 44px;
    padding-inline: 0;
  }

  .journal-more__grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 42px;
  }

  .journal-more__item {
    min-height: 58px;
    padding-block: 8px;
  }

  .journal-more__title {
    display: -webkit-box;
    font-size: 15px;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .journal-more__title,
  .journal-more__item-arrow,
  .journal-more__all,
  .journal-more__topic-link,
  .journal-more__arrow::before {
    transition-duration: 0.01ms !important;
  }
}
/* ONCE HOME JOURNAL AND FOOTER TYPE 2026-08-15: END */

/* ONCE U-STUDIO REDESIGN 2026-08-30: START */
.studio-page {
  --ustudio-paper: #ece8df;
  --ustudio-paper-muted: rgba(17, 17, 19, 0.66);
  --surface-2: #151518;
  --ink: #f4f3f1;
  --ink-dark: #111113;
  --muted: rgba(244, 243, 241, 0.68);
  --line: rgba(244, 243, 241, 0.15);
  --line-strong: rgba(244, 243, 241, 0.3);
  --line-dark: rgba(17, 17, 19, 0.18);
  --accent-live: #ed563d;
  --accent-deep: #8e1a0c;
  --display: var(--font-display);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  background: #08080a;
  color: var(--ink);
}

.studio-page .container {
  width: min(100%, 1480px);
  max-width: 1480px;
  margin-inline: auto;
  padding-inline: clamp(22px, 3.9vw, 58px);
}

.studio-page .button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  min-width: 208px;
  min-height: 54px;
  padding: 0 22px;
  border: 1px solid var(--line-strong);
  background: rgba(8, 8, 10, 0.16);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.studio-page .button:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--ink-dark);
}

.studio-page .button--primary {
  border-color: var(--accent);
  background: var(--accent-deep);
}

.studio-page .button--primary:hover {
  border-color: var(--accent-live);
  background: var(--accent-live);
  color: #fff;
}

.studio-page {
  --ustudio-paper: #ece8df;
  --ustudio-paper-muted: rgba(17, 17, 19, 0.66);
}

.studio-page .footer__sub input {
  min-width: 0;
}

.ustudio-hero {
  position: relative;
  display: grid;
  min-height: min(920px, calc(100svh - 80px));
  overflow: hidden;
  isolation: isolate;
}

.ustudio-hero__media,
.ustudio-hero__poster,
.ustudio-hero__media::after {
  position: absolute;
  inset: 0;
}

.ustudio-hero__media {
  z-index: -2;
  background: #071017;
}

.ustudio-hero__poster,
.ustudio-hero__poster img,
.ustudio-hero__media video {
  width: 100%;
  height: 100%;
}

.ustudio-hero__poster img,
.ustudio-hero__media video {
  object-fit: cover;
  object-position: center;
  filter: saturate(0.82) contrast(1.08) brightness(0.66);
}

.ustudio-hero__media video {
  position: relative;
  z-index: 1;
}

.ustudio-hero__media::after {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(4, 7, 10, 0.46) 0%, rgba(4, 7, 10, 0.16) 38%, rgba(4, 7, 10, 0.72) 100%),
    linear-gradient(90deg, rgba(3, 5, 7, 0.44), rgba(3, 5, 7, 0.08) 30%, rgba(3, 5, 7, 0.08) 70%, rgba(3, 5, 7, 0.44));
  content: "";
}

.ustudio-hero__content {
  display: flex;
  z-index: 2;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: clamp(90px, 12vh, 150px) clamp(105px, 15vh, 170px);
  text-align: center;
  transform: translateY(3.5vh);
}

.ustudio-hero h1 {
  display: grid;
  gap: clamp(8px, 1.3vw, 18px);
  max-width: 1280px;
  margin: 0;
  text-wrap: balance;
}

.ustudio-hero__name {
  max-width: 100%;
  font-family: var(--display);
  font-size: clamp(70px, 8vw, 96px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.9;
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: keep-all;
}

.ustudio-hero__promise {
  font-size: clamp(42px, 5vw, 74px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.ustudio-hero__lead {
  max-width: 760px;
  margin: clamp(24px, 3.5vw, 42px) auto 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 500;
  line-height: 1.55;
  text-wrap: balance;
}

.ustudio-hero__proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 0;
  margin: 30px 0 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  list-style: none;
}

.ustudio-hero__proof li {
  display: flex;
  align-items: center;
}

.ustudio-hero__proof li + li::before {
  width: 4px;
  height: 4px;
  margin-inline: 16px;
  background: var(--accent-live);
  content: "";
}

.ustudio-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

.ustudio-hero__actions .button {
  background: rgba(4, 7, 10, 0.48);
}

.ustudio-hero__actions .button--primary {
  background: var(--accent-deep);
}

.studio-page .button::after,
.ustudio-way > a::after {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.ustudio-hero__scroll {
  position: absolute;
  z-index: 3;
  bottom: 28px;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 88px;
  min-height: 44px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  transform: translateX(-50%);
}

.ustudio-hero__scroll i {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.58);
}

.ustudio-section {
  padding-block: clamp(92px, 10vw, 168px);
}

.ustudio-section__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(300px, 3fr);
  gap: clamp(48px, 8vw, 128px);
  align-items: end;
  margin-bottom: clamp(52px, 7vw, 104px);
}

.ustudio-section__head h2,
.ustudio-equipment__head h2,
.ustudio-robot__head h2,
.ustudio-system__content h2,
.ustudio-close h2 {
  margin: 0;
  font-size: clamp(44px, 5.8vw, 88px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}

.ustudio-system__content h2 {
  font-size: clamp(42px, 4.6vw, 70px);
  white-space: nowrap;
  word-break: keep-all;
}

.ustudio-section__head > p {
  max-width: 65ch;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
}

.ustudio-section__head--center {
  display: block;
  max-width: 970px;
  margin-inline: auto;
  text-align: center;
}

.ustudio-section__head--center > p {
  margin: 26px auto 0;
}

.ustudio-section__head--wide h2 {
  max-width: 980px;
}

.ustudio-ways {
  background: #0b0b0d;
}

.ustudio-ways__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}

.ustudio-way {
  display: flex;
  min-height: 520px;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(34px, 5vw, 76px);
}

.ustudio-way + .ustudio-way {
  border-left: 1px solid var(--line);
}

.ustudio-way h3 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(35px, 4vw, 58px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.ustudio-way__audience {
  order: 2;
  margin-top: 28px;
  color: var(--accent-live);
  font-size: 13px;
  font-weight: 600;
}

.ustudio-way > p {
  order: 3;
  max-width: 60ch;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 17px;
}

.ustudio-way > a {
  order: 4;
  display: inline-flex;
  gap: 14px;
  align-items: center;
  min-height: 48px;
  margin-top: auto;
  padding-top: 48px;
  border-bottom: 1px solid currentColor;
  color: var(--ink);
  font-weight: 600;
}

.ustudio-way > a::after {
  margin-left: 3px;
}

.ustudio-spaces {
  background: #060607;
}

.ustudio-spaces__galleries {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(92px, 11vw, 176px);
}

.ustudio-gallery {
  min-width: 0;
  border-top: 1px solid var(--line-strong);
}

.ustudio-gallery__head {
  display: grid;
  grid-template-columns: minmax(56px, 0.75fr) minmax(0, 7.25fr) minmax(160px, 2fr);
  gap: clamp(22px, 3vw, 52px);
  align-items: start;
  padding: clamp(24px, 3vw, 42px) 0;
}

.ustudio-gallery__head h3 {
  margin: 0;
  font-size: clamp(38px, 4.8vw, 72px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.ustudio-gallery__head p {
  max-width: 70ch;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 16px;
}

.ustudio-gallery__index,
.ustudio-gallery__count {
  color: rgba(255, 255, 255, 0.54);
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

.ustudio-gallery__count {
  justify-self: end;
  padding-top: 4px;
  text-align: right;
}

.ustudio-gallery__track {
  display: grid;
  grid-template-columns: repeat(var(--thumb-count), minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.ustudio-gallery__image {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: var(--surface-2);
  color: var(--ink);
  cursor: zoom-in;
}

.ustudio-gallery__image--lead {
  grid-column: 1 / -1;
}

.ustudio-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease), filter 0.35s ease;
}

.ustudio-gallery__image::after {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 50%;
  background:
    linear-gradient(#fff, #fff) center / 10px 1px no-repeat,
    linear-gradient(#fff, #fff) center / 1px 10px no-repeat,
    rgba(5, 5, 6, 0.36);
  content: "";
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ustudio-gallery__image:hover img {
  filter: saturate(1.04);
  transform: scale(1.015);
}

.ustudio-gallery__image:hover::after,
.ustudio-gallery__image:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

.ustudio-gallery__image:focus-visible {
  outline: 2px solid var(--accent-live);
  outline-offset: 4px;
}

.ustudio-gallery__label {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 38px 16px 14px;
  background: linear-gradient(180deg, transparent, rgba(4, 4, 5, 0.78));
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  text-align: left;
}

.ustudio-gallery__label b {
  color: var(--accent-live);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.ustudio-gallery__image--lead .ustudio-gallery__label {
  gap: 14px;
  padding: clamp(56px, 8vw, 110px) clamp(20px, 3vw, 42px) clamp(20px, 3vw, 36px);
  font-size: clamp(16px, 1.6vw, 22px);
}

.ustudio-lightbox {
  width: min(94vw, 1540px);
  max-width: none;
  max-height: 94dvh;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.ustudio-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(16px);
}

.ustudio-lightbox__panel {
  position: relative;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #050506;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
}

.ustudio-lightbox figure {
  margin: 0;
}

.ustudio-lightbox figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(94dvh - 122px);
  object-fit: contain;
  background: #000;
}

.ustudio-lightbox figcaption {
  display: flex;
  gap: 20px;
  align-items: center;
  min-height: 72px;
  padding: 16px 300px 4px 8px;
}

.ustudio-lightbox figcaption strong {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 500;
}

.ustudio-lightbox figcaption span {
  color: var(--muted);
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.1em;
}

.ustudio-lightbox__close,
.ustudio-lightbox__nav button {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(5, 5, 6, 0.78);
  color: var(--ink);
  cursor: pointer;
}

.ustudio-lightbox__close {
  position: absolute;
  z-index: 2;
  top: 26px;
  right: 26px;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  font-size: 12px;
}

.ustudio-lightbox__close i {
  position: relative;
  width: 13px;
  height: 13px;
}

.ustudio-lightbox__close i::before,
.ustudio-lightbox__close i::after {
  position: absolute;
  top: 6px;
  left: 0;
  width: 13px;
  height: 1px;
  background: currentColor;
  content: "";
}

.ustudio-lightbox__close i::before {
  transform: rotate(45deg);
}

.ustudio-lightbox__close i::after {
  transform: rotate(-45deg);
}

.ustudio-lightbox__nav {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
  gap: 8px;
}

.ustudio-lightbox__nav[hidden] {
  display: none;
}

.ustudio-lightbox__nav button {
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  font-size: 12px;
}

.ustudio-lightbox__nav i {
  position: relative;
  width: 18px;
  height: 1px;
  background: currentColor;
}

.ustudio-lightbox__nav i::before {
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  content: "";
  transform: rotate(-45deg);
}

.ustudio-lightbox__nav [data-studio-lightbox-next] i::before {
  right: 0;
  left: auto;
  border-right: 1px solid currentColor;
  border-left: 0;
  transform: rotate(45deg);
}

.ustudio-lightbox__close:hover,
.ustudio-lightbox__nav button:hover,
.ustudio-lightbox__close:focus-visible,
.ustudio-lightbox__nav button:focus-visible {
  border-color: var(--accent-live);
  outline: 0;
}

.ustudio-equipment {
  overflow: hidden;
  background: var(--ustudio-paper);
  color: var(--ink-dark);
}

.ustudio-equipment__head,
.ustudio-robot__head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(340px, 5fr);
  gap: clamp(48px, 8vw, 128px);
  align-items: end;
  margin-bottom: clamp(54px, 7vw, 106px);
}

.ustudio-equipment__eyebrow,
.ustudio-robot__eyebrow {
  display: block;
  margin-bottom: 22px;
  color: var(--accent-deep);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.ustudio-equipment__intro {
  display: grid;
  justify-items: start;
  gap: 28px;
}

.ustudio-equipment__intro p,
.ustudio-robot__head > p {
  max-width: 62ch;
  margin: 0;
  color: var(--ustudio-paper-muted);
  font-size: 17px;
}

.ustudio-equipment .button {
  border-color: rgba(17, 17, 19, 0.34);
  color: var(--ink-dark);
}

.ustudio-equipment .button:hover {
  border-color: var(--ink-dark);
  background: var(--ink-dark);
  color: var(--ustudio-paper);
}

.ustudio-equipment__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  background: var(--line-dark);
}

.ustudio-equipment-card {
  grid-column: span 3;
  min-width: 0;
  background: #f5f2eb;
}

.ustudio-equipment-card--mini-lf {
  grid-column: span 7;
}

.ustudio-equipment-card--aputure {
  grid-column: span 5;
}

.ustudio-equipment-card__media {
  position: relative;
  display: grid;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #dcd8cf;
}

.ustudio-equipment-card--mini-lf .ustudio-equipment-card__media,
.ustudio-equipment-card--aputure .ustudio-equipment-card__media {
  aspect-ratio: 16 / 8;
}

.ustudio-equipment-card__media--2 {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1px;
}

.ustudio-equipment-card__media--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
}

.ustudio-equipment-card__media img {
  width: 100%;
  height: 100%;
  padding: clamp(12px, 1.6vw, 28px);
  object-fit: contain;
  background: #dedbd4;
  transition: transform 0.75s var(--ease), filter 0.35s ease;
}

.ustudio-equipment-card--red .ustudio-equipment-card__media img,
.ustudio-equipment-card--arri-mini .ustudio-equipment-card__media img {
  padding: 0;
  object-fit: cover;
}

.ustudio-equipment-card--mini-lf .ustudio-equipment-card__media img:last-of-type,
.ustudio-equipment-card--aputure .ustudio-equipment-card__media img {
  background: #111113;
}

.ustudio-equipment-card:hover .ustudio-equipment-card__media img {
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.018);
}

.ustudio-equipment-card__owned {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 8px 10px;
  background: var(--accent-deep);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.ustudio-equipment-card__body {
  display: flex;
  min-height: 330px;
  flex-direction: column;
  padding: clamp(24px, 2.7vw, 40px);
}

.ustudio-equipment-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: rgba(17, 17, 19, 0.48);
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ustudio-equipment-card h3 {
  margin: clamp(42px, 5vw, 72px) 0 0;
  font-size: clamp(31px, 3vw, 45px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
}

.ustudio-equipment-card__model {
  margin: 16px 0 0;
  color: var(--accent-deep);
  font-size: 13px;
  font-weight: 650;
}

.ustudio-equipment-card__summary {
  max-width: 52ch;
  margin: 16px 0 0;
  color: var(--ustudio-paper-muted);
  font-size: 15px;
}

.ustudio-equipment-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: auto 0 0;
  padding: 28px 0 0;
  list-style: none;
}

.ustudio-equipment-card li {
  padding: 7px 9px;
  border: 1px solid rgba(17, 17, 19, 0.2);
  color: rgba(17, 17, 19, 0.7);
  font-size: 11px;
}

.ustudio-equipment__onset {
  position: relative;
  aspect-ratio: 21 / 8;
  margin: clamp(28px, 4vw, 54px) 0 0;
  overflow: hidden;
  background: #111113;
}

.ustudio-equipment__onset::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(4, 4, 5, 0.88));
  content: "";
}

.ustudio-equipment__onset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ustudio-equipment__onset figcaption,
.ustudio-robot__media figcaption {
  position: absolute;
  z-index: 1;
  right: clamp(20px, 3vw, 42px);
  bottom: clamp(20px, 3vw, 38px);
  left: clamp(20px, 3vw, 42px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  color: #fff;
}

.ustudio-equipment__onset figcaption span,
.ustudio-robot__media figcaption span {
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.ustudio-equipment__onset figcaption strong,
.ustudio-robot__media figcaption strong {
  max-width: 18em;
  font-size: clamp(20px, 2.6vw, 38px);
  font-weight: 500;
  line-height: 1.15;
  text-align: right;
}

.ustudio-equipment__note {
  display: grid;
  grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr);
  gap: clamp(28px, 5vw, 80px);
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line-dark);
}

.ustudio-equipment__note strong {
  color: var(--accent-deep);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.ustudio-equipment__note p {
  max-width: 80ch;
  margin: 0;
  color: rgba(17, 17, 19, 0.56);
  font-size: 12px;
}

.ustudio-robot {
  background: #070708;
}

.ustudio-robot__eyebrow {
  color: var(--accent-live);
}

.ustudio-robot__head > p {
  color: var(--muted);
}

.ustudio-robot__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(450px, auto) minmax(250px, auto);
  gap: 12px;
}

.ustudio-robot__media {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #151518;
}

.ustudio-robot__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(4, 4, 5, 0.82));
  content: "";
}

.ustudio-robot__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ustudio-robot__media--lead {
  grid-column: 1 / span 8;
  grid-row: 1 / span 2;
}

.ustudio-robot__media--lead img {
  object-position: 56% center;
}

.ustudio-robot__media--onset {
  grid-column: 9 / -1;
  grid-row: 2;
}

.ustudio-robot__offer {
  display: flex;
  grid-column: 9 / -1;
  grid-row: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(32px, 4.5vw, 64px);
  background: var(--accent-deep);
}

.ustudio-robot__offer-label {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.ustudio-robot__price {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  align-items: baseline;
  margin: clamp(42px, 6vw, 82px) 0 0;
}

.ustudio-robot__price strong {
  font-family: var(--display);
  font-size: clamp(58px, 6vw, 92px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.ustudio-robot__price span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 15px;
}

.ustudio-robot__offer h3 {
  margin: 34px 0 0;
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.ustudio-robot__offer > p:not(.ustudio-robot__price) {
  margin: 15px 0 0;
  color: rgba(255, 255, 255, 0.78);
}

.ustudio-robot__offer ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  width: 100%;
  margin: 26px 0 34px;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  list-style: none;
}

.ustudio-robot__offer li::before {
  margin-right: 7px;
  color: #fff;
  content: "·";
}

.ustudio-robot__offer .button {
  width: 100%;
  margin-top: auto;
  border-color: rgba(255, 255, 255, 0.64);
  color: #fff;
}

.ustudio-robot__offer .button:hover {
  border-color: #fff;
  background: #fff;
  color: var(--accent-deep);
}

.ustudio-robot__offer small {
  display: block;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  line-height: 1.6;
}

.ustudio-system {
  background: #101012;
}

.ustudio-system__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: center;
}

.ustudio-system__media {
  min-height: 640px;
  margin: 0;
  overflow: hidden;
}

.ustudio-system__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ustudio-system__media--plan {
  min-height: 0;
  aspect-ratio: 16 / 11;
  padding: clamp(8px, 1.2vw, 18px);
  background: #f2f0eb;
}

.ustudio-plan {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: #fff;
  cursor: zoom-in;
}

.ustudio-system__media--plan img {
  object-fit: contain;
  transition: transform 0.6s var(--ease);
}

.ustudio-plan:hover img {
  transform: scale(1.012);
}

.ustudio-plan:focus-visible {
  outline: 2px solid var(--accent-live);
  outline-offset: -2px;
}

.ustudio-plan__hint {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  background: rgba(5, 5, 6, 0.86);
  color: var(--ink);
  text-align: left;
}

.ustudio-plan__hint b {
  font-size: 13px;
  font-weight: 600;
}

.ustudio-plan__hint small {
  color: var(--muted);
  font-size: 11px;
}

.ustudio-system__content > p {
  max-width: 62ch;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: 17px;
}

.ustudio-system__list {
  margin: 44px 0 0;
  border-top: 1px solid var(--line-strong);
}

.ustudio-system__list > div {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1.7fr);
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.ustudio-system__list dt {
  color: var(--ink);
  font-weight: 600;
}

.ustudio-system__list dd {
  margin: 0;
  color: var(--muted);
}

.ustudio-facts {
  background: var(--accent-deep);
}

.ustudio-facts__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ustudio-facts__grid > div {
  min-height: 260px;
  padding: 42px clamp(22px, 3vw, 44px);
  border-right: 1px solid rgba(255, 255, 255, 0.24);
}

.ustudio-facts__grid > div:last-child {
  border-right: 0;
}

.ustudio-facts strong,
.ustudio-facts span {
  display: block;
}

.ustudio-facts strong {
  font-family: var(--display);
  font-size: clamp(42px, 5vw, 76px);
  font-weight: 400;
  line-height: 1;
}

.ustudio-facts span {
  margin-top: 78px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
}

.ustudio-start {
  background: var(--ustudio-paper);
  color: var(--ink-dark);
}

.ustudio-start .ustudio-section__head > p {
  color: var(--ustudio-paper-muted);
}

.ustudio-start__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.ustudio-start__grid article {
  display: flex;
  min-height: 540px;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(34px, 5vw, 72px);
}

.ustudio-start__grid article + article {
  border-left: 1px solid var(--line-dark);
}

.ustudio-start__grid h3 {
  max-width: 620px;
  margin: 0;
  font-size: clamp(34px, 3.8vw, 54px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.ustudio-start__grid article > span {
  order: 2;
  margin-top: 25px;
  color: var(--accent-deep);
  font-size: 13px;
  font-weight: 600;
}

.ustudio-start__grid ul {
  order: 3;
  display: grid;
  gap: 10px;
  margin: 24px 0 36px;
  padding-left: 1.2em;
  color: var(--ustudio-paper-muted);
}

.ustudio-start__grid .button {
  order: 4;
  margin-top: auto;
}

.ustudio-start__grid .button:not(.button--primary) {
  border-color: rgba(17, 17, 19, 0.34);
  color: var(--ink-dark);
}

.ustudio-close {
  position: relative;
  overflow: hidden;
  padding-block: clamp(120px, 14vw, 220px);
  background:
    linear-gradient(90deg, rgba(4, 4, 5, 0.94), rgba(4, 4, 5, 0.46)),
    url("https://once-1253477534.cos.ap-guangzhou.myqcloud.com/uploads/202608/30/dc67671cee2240d3.webp") center / cover no-repeat;
}

.ustudio-close__inner {
  position: relative;
  z-index: 1;
}

.ustudio-close h2 {
  max-width: 980px;
}

.ustudio-close p {
  max-width: 62ch;
  margin: 34px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
}

.ustudio-close__inner > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
}

@media (max-width: 1080px) {
  .ustudio-section__head,
  .ustudio-equipment__head,
  .ustudio-robot__head {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ustudio-section__head > p {
    max-width: 720px;
  }

  .ustudio-system__grid {
    grid-template-columns: 1fr;
  }

  .ustudio-system__media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .ustudio-equipment-card {
    grid-column: span 6;
  }

  .ustudio-equipment-card--mini-lf,
  .ustudio-equipment-card--aputure {
    grid-column: 1 / -1;
  }

  .ustudio-robot__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .ustudio-robot__media--lead {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }

  .ustudio-robot__offer,
  .ustudio-robot__media--onset {
    grid-column: auto;
    grid-row: auto;
    min-height: 470px;
  }
}

@media (max-width: 780px) {
  .ustudio-hero {
    min-height: max(700px, calc(100svh - 72px));
  }

  .ustudio-hero__media video {
    display: none;
  }

  .ustudio-hero__poster img {
    object-position: center;
    filter: saturate(0.84) contrast(1.06) brightness(0.58);
  }

  .ustudio-hero__media::after {
    background: linear-gradient(180deg, rgba(3, 5, 7, 0.32), rgba(3, 5, 7, 0.44) 38%, rgba(3, 5, 7, 0.86));
  }

  .ustudio-hero__content {
    justify-content: center;
    padding-block: 74px 82px;
    transform: none;
  }

  .ustudio-hero h1 {
    gap: 12px;
  }

  .ustudio-hero__name {
    font-size: clamp(40px, 13.34vw, 64px);
  }

  .ustudio-hero__promise {
    font-size: clamp(34px, 10vw, 43px);
    line-height: 1.08;
  }

  .ustudio-hero__lead {
    max-width: 19em;
    margin-top: 24px;
    font-size: 18px;
  }

  .ustudio-hero__proof {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 360px);
    gap: 8px 18px;
    margin-top: 24px;
    font-size: 12px;
    text-align: left;
  }

  .ustudio-hero__proof li + li::before {
    display: none;
  }

  .ustudio-hero__proof li::before {
    width: 4px;
    height: 4px;
    margin-right: 8px;
    background: var(--accent-live);
    content: "";
  }

  .ustudio-hero__actions {
    display: grid;
    width: min(100%, 330px);
    margin-top: 28px;
  }

  .ustudio-hero__actions .button {
    width: 100%;
  }

  .ustudio-hero__scroll {
    display: none;
  }

  .ustudio-section {
    padding-block: 82px;
  }

  .ustudio-section__head {
    margin-bottom: 44px;
  }

  .ustudio-section__head h2,
  .ustudio-equipment__head h2,
  .ustudio-robot__head h2,
  .ustudio-system__content h2,
  .ustudio-close h2 {
    font-size: clamp(39px, 12vw, 52px);
    line-height: 1.04;
  }

  .ustudio-system__content h2 {
    font-size: clamp(32px, 9vw, 42px);
  }

  .ustudio-section__head > p,
  .ustudio-equipment__intro p,
  .ustudio-robot__head > p,
  .ustudio-way > p,
  .ustudio-system__content > p {
    font-size: 16px;
  }

  .ustudio-equipment__head,
  .ustudio-robot__head {
    margin-bottom: 44px;
  }

  .ustudio-equipment__eyebrow,
  .ustudio-robot__eyebrow {
    margin-bottom: 16px;
    font-size: 10px;
  }

  .ustudio-equipment__grid,
  .ustudio-robot__grid {
    grid-template-columns: 1fr;
  }

  .ustudio-equipment-card,
  .ustudio-equipment-card--mini-lf,
  .ustudio-equipment-card--aputure,
  .ustudio-robot__media--lead,
  .ustudio-robot__offer,
  .ustudio-robot__media--onset {
    grid-column: 1;
  }

  .ustudio-equipment-card__media,
  .ustudio-equipment-card--mini-lf .ustudio-equipment-card__media,
  .ustudio-equipment-card--aputure .ustudio-equipment-card__media {
    aspect-ratio: 16 / 10;
  }

  .ustudio-equipment-card__body {
    min-height: 300px;
    padding: 28px 22px 30px;
  }

  .ustudio-equipment-card h3 {
    margin-top: 42px;
    font-size: 36px;
  }

  .ustudio-equipment__onset {
    aspect-ratio: 4 / 3;
  }

  .ustudio-equipment__onset figcaption,
  .ustudio-robot__media figcaption {
    display: grid;
    gap: 8px;
  }

  .ustudio-equipment__onset figcaption strong,
  .ustudio-robot__media figcaption strong {
    max-width: 15em;
    font-size: 22px;
    text-align: left;
  }

  .ustudio-equipment__note {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ustudio-robot__grid {
    grid-template-rows: auto;
  }

  .ustudio-robot__media--lead,
  .ustudio-robot__media--onset {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .ustudio-robot__media--onset {
    aspect-ratio: 16 / 10;
  }

  .ustudio-robot__offer {
    min-height: 600px;
    padding: 34px 22px;
  }

  .ustudio-robot__price strong {
    font-size: clamp(52px, 17vw, 74px);
  }

  .ustudio-robot__offer ul {
    grid-template-columns: 1fr;
  }

  .ustudio-ways__grid,
  .ustudio-start__grid {
    grid-template-columns: 1fr;
  }

  .ustudio-way,
  .ustudio-start__grid article {
    min-height: 430px;
    padding: 34px 22px;
  }

  .ustudio-way + .ustudio-way,
  .ustudio-start__grid article + article {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .ustudio-way h3,
  .ustudio-start__grid h3 {
    font-size: 34px;
  }

  .ustudio-way > a {
    padding-top: 38px;
  }

  .ustudio-spaces__galleries {
    gap: 76px;
  }

  .ustudio-gallery__head {
    grid-template-columns: 1fr auto;
    gap: 14px 20px;
    padding: 22px 0 24px;
  }

  .ustudio-gallery__head > div {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .ustudio-gallery__head h3 {
    font-size: 39px;
  }

  .ustudio-gallery__head p {
    margin-top: 15px;
    font-size: 15px;
  }

  .ustudio-gallery__count {
    padding: 0;
  }

  .ustudio-gallery__count::after {
    display: block;
    margin-top: 4px;
    color: var(--accent-live);
    content: "横滑浏览";
  }

  .ustudio-gallery__track {
    display: flex;
    gap: 10px;
    padding-bottom: 12px;
    overflow-x: scroll;
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--accent-live) rgba(255, 255, 255, 0.08);
    scrollbar-width: thin;
    scroll-snap-type: inline mandatory;
  }

  .ustudio-gallery__image,
  .ustudio-gallery__image--lead {
    flex: 0 0 min(78vw, 520px);
    aspect-ratio: 3 / 2;
    scroll-snap-align: start;
  }

  .ustudio-gallery__image::after {
    opacity: 0.82;
    transform: scale(0.88);
  }

  .ustudio-gallery__image--lead .ustudio-gallery__label,
  .ustudio-gallery__label {
    gap: 10px;
    padding: 42px 16px 14px;
    font-size: 13px;
  }

  .ustudio-lightbox {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  .ustudio-lightbox__panel {
    padding: 8px;
  }

  .ustudio-lightbox figure img {
    max-height: calc(100dvh - 210px);
  }

  .ustudio-lightbox figcaption {
    display: grid;
    gap: 5px;
    min-height: 68px;
    padding: 14px 6px;
  }

  .ustudio-lightbox__nav {
    position: static;
    justify-content: space-between;
  }

  .ustudio-lightbox__nav button {
    min-height: 44px;
  }

  .ustudio-lightbox__close {
    top: 18px;
    right: 18px;
  }

  .ustudio-system__media {
    aspect-ratio: 4 / 3;
  }

  .ustudio-system__media--plan {
    aspect-ratio: 16 / 10;
    padding: 6px;
  }

  .ustudio-plan__hint {
    bottom: 7px;
    left: 7px;
    padding: 9px 10px;
  }

  .ustudio-system__list > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .ustudio-facts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ustudio-facts__grid > div {
    min-height: 190px;
    padding: 28px 20px;
  }

  .ustudio-facts__grid > div:nth-child(2) {
    border-right: 0;
  }

  .ustudio-facts__grid > div:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  }

  .ustudio-facts strong {
    font-size: 42px;
  }

  .ustudio-facts span {
    margin-top: 48px;
    font-size: 13px;
  }

  .ustudio-start__grid article + article {
    border-top-color: var(--line-dark);
  }

  .ustudio-close {
    padding-block: 108px;
    background-position: 60% center;
  }

  .ustudio-close p {
    font-size: 16px;
  }

  .ustudio-close__inner > div {
    display: grid;
    width: min(100%, 330px);
  }
}

@media (max-width: 390px) {
  .ustudio-hero__promise {
    font-size: 33px;
  }

  .ustudio-hero__proof {
    grid-template-columns: 1fr;
    width: 238px;
  }
}

@media (min-width: 900px) and (max-height: 760px) {
  .ustudio-hero {
    min-height: 680px;
  }

  .ustudio-hero__content {
    padding-block: 58px 92px;
    transform: translateY(2vh);
  }

  .ustudio-hero__lead {
    margin-top: 22px;
  }

  .ustudio-hero__proof {
    margin-top: 20px;
  }

  .ustudio-hero__actions {
    margin-top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ustudio-hero__media video {
    display: none;
  }
}
/* ONCE U-STUDIO REDESIGN 2026-08-30: END */
/* ONCE SOLUTIONS INDEX V4 2026-08-30: START */
.solutions-v4 {
  --solutions-v4-ink: #09090a;
  --solutions-v4-surface: #111113;
  --solutions-v4-paper: #ece9e2;
  --solutions-v4-paper-2: #f6f3ed;
  --solutions-v4-red: #d63224;
  --solutions-v4-red-dark: #8f1f17;
  --solutions-v4-line: rgba(255, 255, 255, 0.17);
  --solutions-v4-line-dark: rgba(10, 10, 11, 0.2);
  --solutions-v4-muted: rgba(255, 255, 255, 0.68);
  min-width: 0;
  overflow: clip;
  background: var(--solutions-v4-ink);
  color: #fff;
  font-family: "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

.solutions-v4 *,
.solutions-v4 *::before,
.solutions-v4 *::after { box-sizing: border-box; }

.solutions-v4 a { color: inherit; text-decoration: none; }
.solutions-v4 img { display: block; max-width: 100%; }
.solutions-v4 h1,
.solutions-v4 h2,
.solutions-v4 h3,
.solutions-v4 p { margin-top: 0; }

.solutions-v4-shell {
  width: min(100% - 48px, 1540px);
  margin-inline: auto;
}

.solutions-v4-kicker {
  margin-bottom: 22px;
  color: var(--solutions-v4-red);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.solutions-v4-hero {
  position: relative;
  min-height: min(900px, calc(100svh - 74px));
  overflow: hidden;
  border-bottom: 1px solid var(--solutions-v4-line);
  background: #070708;
}

.solutions-v4-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
  pointer-events: none;
}

.solutions-v4-hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(520px, 1.12fr);
  gap: clamp(52px, 7vw, 122px);
  align-items: center;
  min-height: min(820px, calc(100svh - 150px));
  padding-block: clamp(72px, 8vw, 128px);
}

.solutions-v4-hero__copy { max-width: 720px; }

.solutions-v4-hero h1 {
  max-width: none;
  margin-bottom: 34px;
  font-size: clamp(54px, 5.8vw, 94px);
  font-weight: 430;
  letter-spacing: -0.07em;
  line-height: 1.02;
}

.solutions-v4-hero h1 span { display: block; white-space: nowrap; }

.solutions-v4-hero__lead {
  max-width: 34em;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.7;
}

.solutions-v4-hero__outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: clamp(42px, 5vw, 72px) 0 0;
  padding: 0;
  border-top: 1px solid var(--solutions-v4-line);
  list-style: none;
}

.solutions-v4-hero__outcomes li {
  min-height: 104px;
  padding: 18px 18px 18px 0;
  border-right: 1px solid var(--solutions-v4-line);
}

.solutions-v4-hero__outcomes li + li { padding-left: 18px; }
.solutions-v4-hero__outcomes li:last-child { border-right: 0; }
.solutions-v4-hero__outcomes strong,
.solutions-v4-hero__outcomes span { display: block; }
.solutions-v4-hero__outcomes strong { color: var(--solutions-v4-red); font-size: 11px; letter-spacing: 0.12em; }
.solutions-v4-hero__outcomes span { margin-top: 24px; font-size: 14px; line-height: 1.4; }

.solutions-v4-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  margin-top: 36px;
}

.solutions-v4-button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.solutions-v4-button--primary { border-color: var(--solutions-v4-red); background: var(--solutions-v4-red); }
.solutions-v4-button:hover { transform: translateY(-2px); }
.solutions-v4-button--primary:hover { border-color: #ef4b3d; background: #ef4b3d; }

.solutions-v4-text-link {
  display: inline-flex;
  min-height: 44px;
  gap: 12px;
  align-items: center;
  padding: 0 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.36);
  font-size: 14px;
  font-weight: 650;
}

.solutions-v4-text-link span { color: var(--solutions-v4-red); }

.solutions-v4 a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 5px;
}

.solutions-v4-hero__media {
  position: relative;
  min-height: 620px;
}

.solutions-v4-hero__frame {
  position: absolute;
  display: block;
  overflow: hidden;
  background: #18181a;
}

.solutions-v4-hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2,.65,.25,1);
}

.solutions-v4-hero__frame:hover img { transform: scale(1.025); }

.solutions-v4-hero__frame span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 70px 20px 18px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.solutions-v4-hero__frame--main {
  top: 0;
  right: 0;
  width: 78%;
  height: 72%;
}

.solutions-v4-hero__frame--secondary {
  bottom: 0;
  left: 0;
  width: 48%;
  height: 42%;
  border: 10px solid var(--solutions-v4-ink);
}

.solutions-v4-hero__caption {
  position: absolute;
  right: 0;
  bottom: 7%;
  width: 43%;
  margin: 0;
  color: rgba(255, 255, 255, 0.54);
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.solutions-v4-hero__caption b { display: block; margin-bottom: 5px; color: var(--solutions-v4-red); }

.solutions-v4-hero__ticker {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--solutions-v4-line);
}

.solutions-v4-hero__ticker p {
  display: flex;
  min-height: 92px;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 14px clamp(14px, 2vw, 30px);
  border-right: 1px solid var(--solutions-v4-line);
}

.solutions-v4-hero__ticker p:last-child { border-right: 0; }
.solutions-v4-hero__ticker strong,
.solutions-v4-hero__ticker span { display: block; }
.solutions-v4-hero__ticker strong { color: #fff; font-size: clamp(18px, 1.55vw, 25px); font-weight: 540; letter-spacing: -0.025em; }
.solutions-v4-hero__ticker span { margin-top: 6px; color: rgba(255, 255, 255, 0.54); font-size: 10px; letter-spacing: 0.08em; }

.solutions-v4-trust {
  padding-block: clamp(78px, 8vw, 124px);
  background: var(--solutions-v4-red);
  color: #fff;
}

.solutions-v4-trust__layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(52px, 9vw, 150px);
  align-items: start;
}

.solutions-v4-trust .solutions-v4-kicker { color: rgba(255, 255, 255, 0.68); }

.solutions-v4-trust__lead h2 {
  max-width: 11em;
  margin: 0;
  font-size: clamp(42px, 5.1vw, 78px);
  font-weight: 430;
  letter-spacing: -0.06em;
  line-height: 1.02;
}

.solutions-v4-trust__statement {
  max-width: 41em;
  margin-bottom: 30px;
  font-size: clamp(21px, 2vw, 30px);
  font-weight: 480;
  letter-spacing: -0.025em;
  line-height: 1.55;
}

.solutions-v4-trust__note {
  max-width: 46em;
  margin-bottom: clamp(38px, 5vw, 62px);
  padding-left: 20px;
  border-left: 2px solid rgba(255, 255, 255, 0.7);
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  line-height: 1.7;
}

.solutions-v4-trust__brands {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.32);
  border-left: 1px solid rgba(255, 255, 255, 0.32);
}

.solutions-v4-trust__brands a {
  display: flex;
  min-height: 116px;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.32);
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  transition: background-color 180ms ease, color 180ms ease;
}

.solutions-v4-trust__brands a:hover { background: #fff; color: var(--solutions-v4-red-dark); }
.solutions-v4-trust__brands span { color: currentColor; font-size: 9px; letter-spacing: 0.13em; opacity: 0.66; }
.solutions-v4-trust__brands strong { font-size: clamp(17px, 1.45vw, 23px); font-weight: 580; letter-spacing: -0.03em; }

.solutions-v4-section { padding-block: clamp(92px, 11vw, 176px); }

.solutions-v4-section__head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
  gap: clamp(42px, 8vw, 132px);
  align-items: end;
  margin-bottom: clamp(56px, 7vw, 106px);
}

.solutions-v4-section__head h2,
.solutions-v4-close h2 {
  max-width: 9em;
  margin-bottom: 0;
  font-size: clamp(48px, 6.4vw, 96px);
  font-weight: 430;
  letter-spacing: -0.065em;
  line-height: 0.98;
}

.solutions-v4-section__head > p {
  max-width: 42em;
  margin: 0;
  color: rgba(255, 255, 255, 0.67);
  font-size: 17px;
  line-height: 1.8;
}

.solutions-v4-goals { background: var(--solutions-v4-surface); }

.solutions-v4-goal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--solutions-v4-line);
  border-left: 1px solid var(--solutions-v4-line);
}

.solutions-v4-goal {
  position: relative;
  min-height: 590px;
  overflow: hidden;
  border-right: 1px solid var(--solutions-v4-line);
  border-bottom: 1px solid var(--solutions-v4-line);
  isolation: isolate;
}

.solutions-v4-goal::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 3, 4, 0.05) 10%, rgba(3, 3, 4, 0.93) 88%);
  content: "";
}

.solutions-v4-goal > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.06);
  transition: filter 400ms ease, transform 700ms cubic-bezier(.2,.65,.25,1);
}

.solutions-v4-goal:hover > img { filter: saturate(1) contrast(1.03); transform: scale(1.025); }

.solutions-v4-goal__index {
  position: absolute;
  top: 26px;
  left: 28px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.solutions-v4-goal > div {
  position: absolute;
  right: clamp(26px, 4vw, 58px);
  bottom: clamp(30px, 5vw, 64px);
  left: clamp(26px, 4vw, 58px);
}

.solutions-v4-goal h3 { margin-bottom: 20px; font-size: clamp(37px, 4vw, 62px); font-weight: 460; letter-spacing: -0.05em; }
.solutions-v4-goal p { max-width: 33em; margin-bottom: 28px; color: rgba(255, 255, 255, 0.76); font-size: 16px; line-height: 1.7; }
.solutions-v4-goal strong { color: #fff; font-size: 13px; letter-spacing: 0.04em; }

.solutions-v4-directory { background: var(--solutions-v4-paper); color: var(--solutions-v4-ink); }
.solutions-v4-section__head--light > p { color: rgba(9, 9, 10, 0.65); }

.solutions-v4-directory__group {
  display: grid;
  grid-template-columns: minmax(190px, 0.28fr) minmax(0, 0.72fr);
  gap: clamp(34px, 7vw, 112px);
  border-top: 1px solid var(--solutions-v4-line-dark);
}

.solutions-v4-directory__group + .solutions-v4-directory__group { margin-top: clamp(70px, 9vw, 132px); }

.solutions-v4-directory__group > h3 {
  margin: 0;
  padding-top: 26px;
  font-size: 19px;
  font-weight: 650;
}

.solutions-v4-directory__group > h3 span { display: block; margin-top: 8px; color: var(--solutions-v4-red); font-size: 10px; letter-spacing: 0.16em; }

.solutions-v4-directory__list a {
  display: grid;
  grid-template-columns: 54px minmax(180px, 0.8fr) minmax(220px, 1.2fr) 28px;
  gap: 18px;
  align-items: center;
  min-height: 112px;
  border-bottom: 1px solid var(--solutions-v4-line-dark);
  transition: background-color 180ms ease, padding 180ms ease;
}

.solutions-v4-directory__list a:hover { padding-inline: 18px; background: rgba(9, 9, 10, 0.045); }
.solutions-v4-directory__list b { color: var(--solutions-v4-red); font-size: 11px; letter-spacing: 0.12em; }
.solutions-v4-directory__list strong { font-size: clamp(20px, 2vw, 30px); font-weight: 520; letter-spacing: -0.03em; }
.solutions-v4-directory__list span { color: rgba(9, 9, 10, 0.6); font-size: 14px; line-height: 1.5; }
.solutions-v4-directory__list i { color: var(--solutions-v4-red); font-size: 19px; font-style: normal; text-align: right; }

.solutions-v4-method { background: var(--solutions-v4-paper-2); color: var(--solutions-v4-ink); }
.solutions-v4-method .solutions-v4-section__head > p { color: rgba(9, 9, 10, 0.64); }

.solutions-v4-method__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--solutions-v4-line-dark);
  border-bottom: 1px solid var(--solutions-v4-line-dark);
  list-style: none;
}

.solutions-v4-method__steps li {
  display: flex;
  min-height: 370px;
  flex-direction: column;
  padding: 28px clamp(20px, 2.8vw, 42px) 36px;
  border-right: 1px solid var(--solutions-v4-line-dark);
}

.solutions-v4-method__steps li:last-child { border-right: 0; }
.solutions-v4-method__steps b { color: var(--solutions-v4-red); font-size: 11px; letter-spacing: 0.12em; }
.solutions-v4-method__steps li > div { margin-top: auto; }
.solutions-v4-method__steps h3 { margin-bottom: 18px; font-size: clamp(25px, 2.4vw, 35px); font-weight: 520; letter-spacing: -0.04em; }
.solutions-v4-method__steps p { margin: 0; color: rgba(9, 9, 10, 0.62); font-size: 15px; line-height: 1.7; }

.solutions-v4-method__proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(52px, 7vw, 94px);
  background: var(--solutions-v4-line-dark);
}

.solutions-v4-method__proof p { min-height: 190px; margin: 0; padding: 30px; background: var(--solutions-v4-paper-2); }
.solutions-v4-method__proof span,
.solutions-v4-method__proof strong,
.solutions-v4-method__proof small { display: block; }
.solutions-v4-method__proof span { color: var(--solutions-v4-red); font-size: 11px; }
.solutions-v4-method__proof strong { margin-top: 48px; font-size: 24px; font-weight: 560; }
.solutions-v4-method__proof small { margin-top: 9px; color: rgba(9, 9, 10, 0.58); font-size: 13px; }

.solutions-v4-close {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background: #060607;
}

.solutions-v4-close__image {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 5, 6, 0.97) 0%, rgba(5, 5, 6, 0.8) 48%, rgba(5, 5, 6, 0.34) 100%),
    url("https://once-1253477534.cos.ap-guangzhou.myqcloud.com/uploads/202607/06/90f9260061a42d2a.webp") center / cover no-repeat;
  filter: saturate(0.78);
}

.solutions-v4-close__layout {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 720px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-block: 110px;
}

.solutions-v4-close__layout > p:not(.solutions-v4-kicker) {
  max-width: 38em;
  margin: 32px 0 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 18px;
  line-height: 1.8;
}

@media (max-width: 1120px) {
  .solutions-v4-hero__layout { grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr); gap: 48px; }
  .solutions-v4-hero__media { min-height: 520px; }
  .solutions-v4-method__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solutions-v4-method__steps li:nth-child(2) { border-right: 0; }
  .solutions-v4-method__steps li:nth-child(-n + 2) { border-bottom: 1px solid var(--solutions-v4-line-dark); }
  .solutions-v4-trust__layout { gap: 58px; }
}

@media (max-width: 860px) {
  .solutions-v4-shell { width: min(100% - 36px, 1540px); }
  .solutions-v4-hero { min-height: auto; }
  .solutions-v4-hero__layout { grid-template-columns: 1fr; padding-block: 78px 54px; }
  .solutions-v4-hero h1 { font-size: clamp(58px, 14vw, 90px); }
  .solutions-v4-hero__media { min-height: 560px; }
  .solutions-v4-hero__ticker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .solutions-v4-hero__ticker p:nth-child(-n + 3) { border-bottom: 1px solid var(--solutions-v4-line); }
  .solutions-v4-trust__layout { grid-template-columns: 1fr; }
  .solutions-v4-section__head { grid-template-columns: 1fr; gap: 30px; align-items: start; }
  .solutions-v4-section__head h2,
  .solutions-v4-close h2 { font-size: clamp(48px, 11vw, 72px); }
  .solutions-v4-goal { min-height: 520px; }
  .solutions-v4-directory__group { grid-template-columns: 1fr; gap: 20px; }
  .solutions-v4-directory__list a { grid-template-columns: 46px minmax(0, 1fr) 24px; }
  .solutions-v4-directory__list a > span { grid-column: 2; }
  .solutions-v4-directory__list a > i { grid-column: 3; grid-row: 1 / span 2; }
}

@media (max-width: 640px) {
  .solutions-v4-shell { width: min(100% - 28px, 1540px); }
  .solutions-v4-kicker { margin-bottom: 17px; font-size: 10px; }
  .solutions-v4-hero__layout { gap: 42px; padding-block: 64px 40px; }
  .solutions-v4-hero h1 { margin-bottom: 24px; font-size: clamp(47px, 13.2vw, 57px); line-height: 1.04; }
  .solutions-v4-hero__lead { font-size: 17px; line-height: 1.65; }
  .solutions-v4-hero__outcomes { grid-template-columns: 1fr; margin-top: 34px; }
  .solutions-v4-hero__outcomes li,
  .solutions-v4-hero__outcomes li + li { display: grid; grid-template-columns: 34px 1fr; min-height: 0; padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--solutions-v4-line); }
  .solutions-v4-hero__outcomes span { margin-top: 0; }
  .solutions-v4-actions { display: grid; width: 100%; }
  .solutions-v4-button { width: 100%; }
  .solutions-v4-text-link { justify-content: space-between; }
  .solutions-v4-hero__media { min-height: 440px; }
  .solutions-v4-hero__frame--main { width: 92%; height: 69%; }
  .solutions-v4-hero__frame--secondary { width: 63%; height: 40%; border-width: 7px; }
  .solutions-v4-hero__caption { right: 0; bottom: 2%; width: 32%; font-size: 9px; }
  .solutions-v4-hero__ticker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solutions-v4-hero__ticker p { min-height: 78px; padding: 12px 14px; }
  .solutions-v4-hero__ticker p:nth-child(-n + 4) { border-bottom: 1px solid var(--solutions-v4-line); }
  .solutions-v4-hero__ticker strong { font-size: 18px; }
  .solutions-v4-hero__ticker span { font-size: 9px; letter-spacing: 0.04em; }
  .solutions-v4-trust { padding-block: 76px; }
  .solutions-v4-trust__layout { gap: 42px; }
  .solutions-v4-trust__lead h2 { font-size: 43px; }
  .solutions-v4-trust__statement { font-size: 21px; line-height: 1.58; }
  .solutions-v4-trust__brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solutions-v4-trust__brands a { min-height: 104px; padding: 15px; }
  .solutions-v4-section { padding-block: 82px; }
  .solutions-v4-section__head { margin-bottom: 48px; }
  .solutions-v4-section__head h2,
  .solutions-v4-close h2 { font-size: 48px; line-height: 1.02; }
  .solutions-v4-section__head > p { font-size: 16px; }
  .solutions-v4-goal-grid { grid-template-columns: 1fr; }
  .solutions-v4-goal { min-height: 500px; }
  .solutions-v4-goal h3 { font-size: 39px; }
  .solutions-v4-goal p { font-size: 15px; }
  .solutions-v4-directory__group + .solutions-v4-directory__group { margin-top: 74px; }
  .solutions-v4-directory__list a { min-height: 120px; gap: 10px; }
  .solutions-v4-directory__list strong { font-size: 21px; }
  .solutions-v4-directory__list span { font-size: 13px; }
  .solutions-v4-method__steps { grid-template-columns: 1fr; }
  .solutions-v4-method__steps li,
  .solutions-v4-method__steps li:nth-child(2) { min-height: 270px; border-right: 0; border-bottom: 1px solid var(--solutions-v4-line-dark); }
  .solutions-v4-method__steps li:last-child { border-bottom: 0; }
  .solutions-v4-method__proof { grid-template-columns: 1fr; }
  .solutions-v4-method__proof p { min-height: 165px; }
  .solutions-v4-method__proof strong { margin-top: 34px; }
  .solutions-v4-close,
  .solutions-v4-close__layout { min-height: 660px; }
  .solutions-v4-close__image { background-position: 64% center; }
  .solutions-v4-close__layout { padding-block: 92px; }
  .solutions-v4-close__layout > p:not(.solutions-v4-kicker) { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .solutions-v4 *,
  .solutions-v4 *::before,
  .solutions-v4 *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}
/* ONCE SOLUTIONS INDEX V4 2026-08-30: END */

/* ONCE SOCIAL MEDIA SHORT VIDEO V2 2026-08-31: START */
.social-video-v2 {
  --smv-black: #080809;
  --smv-surface: #111113;
  --smv-surface-2: #171719;
  --smv-paper: #ece9e2;
  --smv-paper-soft: #f7f4ee;
  --smv-white: #f5f3ef;
  --smv-red: #dd3325;
  --smv-red-hot: #f04a3a;
  --smv-red-dark: #8f1f17;
  --smv-line: rgba(255, 255, 255, 0.16);
  --smv-line-strong: rgba(255, 255, 255, 0.32);
  --smv-line-dark: rgba(9, 9, 10, 0.18);
  --smv-muted: rgba(255, 255, 255, 0.69);
  --smv-muted-dark: rgba(9, 9, 10, 0.66);
  min-width: 0;
  overflow: clip;
  background: var(--smv-black);
  color: var(--smv-white);
  font-family: var(--font-cjk, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif);
}

.social-video-v2 *,
.social-video-v2 *::before,
.social-video-v2 *::after {
  box-sizing: border-box;
}

.social-video-v2 a {
  color: inherit;
  text-decoration: none;
}

.social-video-v2 img,
.social-video-v2 video {
  display: block;
  max-width: 100%;
}

.social-video-v2 h1,
.social-video-v2 h2,
.social-video-v2 h3 {
  font-family: var(--font-display, "Anybody Expanded", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif);
  text-wrap: balance;
}

.social-video-v2 h1,
.social-video-v2 h2,
.social-video-v2 h3,
.social-video-v2 p,
.social-video-v2 dl,
.social-video-v2 dd,
.social-video-v2 figure {
  margin-top: 0;
}

.social-video-v2__skip {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  background: #fff;
  color: #000 !important;
  transform: translateY(-180%);
  transition: transform 160ms ease;
}

.social-video-v2__skip:focus {
  transform: translateY(0);
}

.smv-shell {
  width: min(100% - 48px, 1540px);
  margin-inline: auto;
}

.smv-kicker {
  margin-bottom: 22px;
  color: var(--smv-red);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}

.smv-hero {
  position: relative;
  min-height: min(940px, calc(100svh - 72px));
  overflow: hidden;
  border-bottom: 1px solid var(--smv-line);
  background:
    radial-gradient(circle at 82% 18%, rgba(221, 51, 37, 0.14), transparent 27%),
    #070708;
}

.smv-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, #000 0%, #000 46%, transparent 88%);
  pointer-events: none;
}

.smv-hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
  gap: clamp(54px, 7vw, 128px);
  align-items: center;
  min-height: min(850px, calc(100svh - 132px));
  padding-block: clamp(68px, 8vw, 124px);
}

.smv-hero__copy {
  max-width: 720px;
}

.smv-hero h1 {
  max-width: 7.5em;
  margin-bottom: 26px;
  font-size: clamp(58px, 6vw, 94px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
}

.smv-hero h1 span {
  color: var(--smv-red);
  font-weight: 350;
}

.smv-hero__promise {
  max-width: 23em;
  margin-bottom: 16px;
  color: #fff;
  font-size: clamp(20px, 1.75vw, 28px);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.42;
}

.smv-hero__lead {
  max-width: 39em;
  margin-bottom: 0;
  color: var(--smv-muted);
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.75;
}

.smv-hero__benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: clamp(34px, 4vw, 54px) 0 0;
  padding: 0;
  border-block: 1px solid var(--smv-line);
  list-style: none;
}

.smv-hero__benefits li {
  min-height: 88px;
  padding: 15px 16px 14px 0;
  border-right: 1px solid var(--smv-line);
}

.smv-hero__benefits li + li {
  padding-left: 16px;
}

.smv-hero__benefits li:last-child {
  border-right: 0;
}

.smv-hero__benefits b,
.smv-hero__benefits span {
  display: block;
}

.smv-hero__benefits b {
  color: var(--smv-red);
  font-size: 10px;
  letter-spacing: 0.14em;
}

.smv-hero__benefits span {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
}

.smv-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  margin: 20px 0 0;
}

.smv-hero__trust div {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.smv-hero__trust dt {
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}

.smv-hero__trust dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.53);
  font-size: 11px;
}

.smv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  margin-top: 32px;
}

.smv-button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 27px;
  border: 1px solid var(--smv-line-strong);
  background: transparent;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: 0.035em;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.smv-button--primary {
  border-color: var(--smv-red);
  background: var(--smv-red);
}

.smv-button--dark {
  border-color: #111;
  color: #111 !important;
}

.smv-button:hover {
  transform: translateY(-2px);
}

.smv-button--primary:hover {
  border-color: var(--smv-red-hot);
  background: var(--smv-red-hot);
}

.smv-button--dark:hover {
  background: #111;
  color: #fff !important;
}

.smv-text-link {
  display: inline-flex;
  min-height: 44px;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.36);
  font-size: 14px;
  font-weight: 700;
}

.smv-text-link span {
  color: var(--smv-red);
}

.smv-text-link--dark {
  border-color: rgba(9, 9, 10, 0.35);
  color: #09090a !important;
}

.social-video-v2 a:focus-visible,
.social-video-v2 summary:focus-visible {
  outline: 2px solid var(--smv-red-hot);
  outline-offset: 5px;
}

.smv-hero__media {
  position: relative;
  min-height: 660px;
}

.smv-hero__frame {
  position: absolute;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.21);
  background: #171719;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
}

.smv-hero__frame img,
.smv-hero__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.65, 0.25, 1);
}

.smv-hero__frame:hover img,
.smv-hero__frame:hover video {
  transform: scale(1.025);
}

.smv-hero__frame > span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 82px 15px 15px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.84));
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.15em;
}

.smv-hero__frame--video {
  z-index: 2;
  top: 2%;
  left: 26%;
  width: 45%;
  aspect-ratio: 9 / 16;
}

.smv-hero__frame--tool {
  z-index: 1;
  top: 0;
  right: 0;
  width: 39%;
  height: 46%;
}

.smv-hero__frame--pet {
  z-index: 3;
  bottom: 5%;
  left: 0;
  width: 39%;
  height: 39%;
  border: 9px solid var(--smv-black);
}

.smv-hero__media-note {
  position: absolute;
  right: 2%;
  bottom: 10%;
  width: 24%;
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  letter-spacing: 0.09em;
  line-height: 1.7;
}

.smv-hero__media-note b,
.smv-hero__media-note span {
  display: block;
}

.smv-hero__media-note b {
  color: var(--smv-red);
}

.smv-ticker {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 58px;
  gap: 22px;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-top: 1px solid var(--smv-line);
  background: rgba(4, 4, 5, 0.72);
  color: rgba(255, 255, 255, 0.71);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

.smv-ticker i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--smv-red);
}

.smv-anchor-nav {
  position: sticky;
  z-index: 30;
  top: 0;
  border-bottom: 1px solid var(--smv-line);
  background: rgba(8, 8, 9, 0.92);
  backdrop-filter: blur(16px);
}

.smv-anchor-nav .smv-shell {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.smv-anchor-nav a {
  display: flex;
  min-height: 58px;
  gap: 11px;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--smv-line);
  color: rgba(255, 255, 255, 0.63);
  font-size: 12px;
  transition: color 160ms ease, background-color 160ms ease;
}

.smv-anchor-nav a:first-child {
  border-left: 1px solid var(--smv-line);
}

.smv-anchor-nav a span {
  color: var(--smv-red);
  font-size: 9px;
}

.smv-anchor-nav a:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}

.smv-positioning {
  padding-block: clamp(72px, 7.5vw, 118px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  background: var(--smv-red);
  color: #fff;
}

.smv-positioning__layout {
  display: grid;
  grid-template-columns: 132px minmax(360px, 0.9fr) minmax(420px, 0.8fr);
  gap: clamp(32px, 5vw, 90px);
  align-items: start;
}

.smv-positioning__index {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.17em;
}

.smv-positioning h2 {
  margin: 0;
  font-size: clamp(46px, 4.7vw, 76px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.smv-positioning__copy {
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.smv-positioning__claim {
  margin: 0;
  padding-block: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  font-size: clamp(21px, 2vw, 30px);
  font-weight: 720;
  letter-spacing: -0.03em;
  line-height: 1.45;
}

.smv-positioning__price {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: baseline;
  margin: 0;
  padding-block: 24px 16px;
}

.smv-positioning__price strong {
  font-size: 28px;
  letter-spacing: -0.04em;
}

.smv-positioning__price span {
  font-size: 16px;
  font-weight: 650;
}

.smv-positioning__note {
  max-width: 40em;
  margin: 0;
  color: rgba(255, 255, 255, 0.73);
  font-size: 12px;
  line-height: 1.7;
}

.smv-positioning__fun {
  margin: 4px 0 17px;
  color: #fff;
  font-size: clamp(17px, 1.55vw, 23px);
  font-weight: 760;
  letter-spacing: -0.025em;
  line-height: 1.5;
}

.smv-section {
  padding-block: clamp(92px, 10vw, 164px);
}

.smv-section__head {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(360px, 0.74fr);
  gap: clamp(42px, 8vw, 140px);
  align-items: end;
  margin-bottom: clamp(54px, 7vw, 100px);
}

.smv-section__head--compact {
  margin-bottom: clamp(46px, 6vw, 78px);
}

.smv-section__head h2,
.smv-value h2,
.smv-faq h2,
.smv-seo h2 {
  margin-bottom: 0;
  font-size: clamp(42px, 4.5vw, 70px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.smv-section__head > p,
.smv-faq header > p:last-child {
  max-width: 38em;
  margin-bottom: 0;
  color: var(--smv-muted);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.8;
}

.smv-partners {
  border-bottom: 1px solid var(--smv-line);
  background: var(--smv-surface);
}

.smv-partner-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(230px, 1fr));
  gap: 18px;
  padding-bottom: 18px;
}

.smv-partner {
  min-width: 0;
}

.smv-partner__screen {
  aspect-ratio: 338 / 665;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background-image: var(--smv-partner-sheet);
  background-position: var(--partner-position);
  background-repeat: no-repeat;
  background-size: 568.05% 162.4%;
  filter: saturate(0.9) contrast(1.03);
  transition: transform 260ms ease, filter 260ms ease;
}

.smv-partner:hover .smv-partner__screen {
  filter: saturate(1) contrast(1.05);
  transform: translateY(-5px);
}

.smv-partner__meta {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding-top: 17px;
}

.smv-partner__meta > span {
  color: var(--smv-red);
  font-size: 11px;
  font-weight: 800;
}

.smv-partner__meta h3 {
  margin-bottom: 6px;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.smv-partner__meta p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
}

.smv-evidence-note,
.smv-scope-note {
  margin: 28px 0 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  line-height: 1.65;
}

.smv-value {
  background: var(--smv-paper);
  color: #09090a;
}

.smv-value .smv-kicker {
  color: var(--smv-red-dark);
}

.smv-value__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(560px, 1.14fr);
  gap: clamp(58px, 9vw, 170px);
}

.smv-value__intro {
  position: sticky;
  top: 108px;
  align-self: start;
}

.smv-value__intro > p:not(.smv-kicker) {
  max-width: 33em;
  margin: 30px 0 0;
  color: var(--smv-muted-dark);
  font-size: 18px;
  line-height: 1.75;
}

.smv-value__intro .smv-text-link {
  margin-top: 34px;
}

.smv-value__list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--smv-line-dark);
  list-style: none;
}

.smv-value__list li {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 28px;
  padding-block: clamp(28px, 4vw, 54px);
  border-bottom: 1px solid var(--smv-line-dark);
}

.smv-value__list b {
  color: var(--smv-red-dark);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.smv-value__list h3 {
  margin-bottom: 15px;
  font-size: clamp(28px, 2.9vw, 46px);
  font-weight: 520;
  letter-spacing: -0.05em;
}

.smv-value__list p {
  max-width: 37em;
  margin-bottom: 0;
  color: var(--smv-muted-dark);
  font-size: 16px;
  line-height: 1.75;
}

.smv-service {
  border-bottom: 1px solid var(--smv-line);
  background: var(--smv-black);
}

.smv-service__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--smv-line);
  border-left: 1px solid var(--smv-line);
}

.smv-service-card {
  position: relative;
  min-height: 570px;
  padding: clamp(30px, 3.4vw, 54px);
  overflow: hidden;
  border-right: 1px solid var(--smv-line);
  border-bottom: 1px solid var(--smv-line);
  background: var(--smv-surface);
}

.smv-service-card::before {
  position: absolute;
  inset: auto -20% -45% 25%;
  height: 68%;
  background: radial-gradient(circle, rgba(221, 51, 37, 0.2), transparent 67%);
  content: "";
  opacity: 0;
  transition: opacity 220ms ease, transform 420ms ease;
}

.smv-service-card:hover::before {
  opacity: 1;
  transform: translateY(-10%);
}

.smv-service-card__index {
  display: block;
  margin-bottom: clamp(90px, 10vw, 162px);
  color: var(--smv-red);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.15em;
}

.smv-service-card h3 {
  position: relative;
  margin-bottom: 20px;
  font-size: clamp(29px, 3vw, 48px);
  font-weight: 480;
  letter-spacing: -0.055em;
  line-height: 1.12;
}

.smv-service-card > p {
  position: relative;
  min-height: 86px;
  margin-bottom: 30px;
  color: var(--smv-muted);
  font-size: 15px;
  line-height: 1.75;
}

.smv-service-card ul {
  position: relative;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--smv-line);
  list-style: none;
}

.smv-service-card li {
  padding: 11px 0;
  border-bottom: 1px solid var(--smv-line);
  color: rgba(255, 255, 255, 0.77);
  font-size: 12px;
}

.smv-delivery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 64px;
  border-top: 1px solid var(--smv-line);
  border-left: 1px solid var(--smv-line);
}

.smv-delivery p {
  min-height: 148px;
  margin: 0;
  padding: 25px;
  border-right: 1px solid var(--smv-line);
  border-bottom: 1px solid var(--smv-line);
}

.smv-delivery span,
.smv-delivery strong,
.smv-delivery small {
  display: block;
}

.smv-delivery span {
  color: var(--smv-red);
  font-size: 10px;
}

.smv-delivery strong {
  margin-top: 32px;
  font-size: 16px;
}

.smv-delivery small {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  line-height: 1.55;
}

.smv-work {
  background: var(--smv-paper-soft);
  color: #09090a;
}

.smv-work .smv-section__head > p {
  color: var(--smv-muted-dark);
}

.smv-work .smv-section__head h2 {
  font-size: clamp(42px, 4vw, 60px);
}

.smv-work__swipe {
  display: none;
}

.smv-work__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.35vw, 22px);
  align-items: start;
}

.smv-work-card {
  min-width: 0;
  color: #09090a !important;
  transition: transform 360ms cubic-bezier(0.2, 0.65, 0.25, 1);
}

.smv-work-card figure {
  position: relative;
  isolation: isolate;
  aspect-ratio: 9 / 16;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 10, 0.13);
  background: #d8d5cf;
}

.smv-work-card figure::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(5, 5, 6, 0.2));
  content: "";
  pointer-events: none;
}

.smv-work-card figure::after {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(8, 8, 9, 0.42);
  color: #fff;
  content: "↗";
  font-size: 13px;
  backdrop-filter: blur(8px);
}

.smv-work-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 620ms cubic-bezier(0.2, 0.65, 0.25, 1), filter 280ms ease;
}

.smv-work-card:hover img {
  filter: saturate(1.08);
  transform: scale(1.025);
}

.smv-work-card:hover {
  transform: translateY(-7px);
}

.smv-work-card > div {
  min-height: 144px;
  padding: 18px 2px 28px;
  border-top: 1px solid var(--smv-line-dark);
}

.smv-work-card span {
  color: var(--smv-red-dark);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.smv-work-card h3 {
  margin: 12px 0 8px;
  font-size: clamp(19px, 1.55vw, 25px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.smv-work-card p {
  margin-bottom: 0;
  color: var(--smv-muted-dark);
  font-size: 12px;
  line-height: 1.65;
}

.smv-work__more {
  display: flex;
  justify-content: center;
  margin-top: 64px;
}

@media (min-width: 1241px) {
  .smv-work-card:nth-child(even) {
    margin-top: 48px;
  }
}

.smv-process {
  border-bottom: 1px solid var(--smv-line);
  background: var(--smv-surface);
}

.smv-process__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--smv-line);
  border-left: 1px solid var(--smv-line);
  list-style: none;
}

.smv-process__steps li {
  min-height: 330px;
  padding: 28px;
  border-right: 1px solid var(--smv-line);
  border-bottom: 1px solid var(--smv-line);
}

.smv-process__steps > li > b {
  color: var(--smv-red);
  font-size: 11px;
  letter-spacing: 0.14em;
}

.smv-process__steps > li > div {
  margin-top: 100px;
}

.smv-process__steps span {
  color: rgba(255, 255, 255, 0.43);
  font-size: 9px;
  letter-spacing: 0.18em;
}

.smv-process__steps h3 {
  margin: 15px 0 17px;
  font-size: 28px;
  font-weight: 520;
}

.smv-process__steps p {
  margin-bottom: 0;
  color: var(--smv-muted);
  font-size: 14px;
  line-height: 1.7;
}

.smv-process__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 34px;
  border-top: 1px solid var(--smv-line);
}

.smv-process__links a {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--smv-line);
}

.smv-process__links a:first-child {
  padding-right: 30px;
}

.smv-process__links a + a {
  padding-left: 30px;
  border-left: 1px solid var(--smv-line);
}

.smv-process__links span {
  color: rgba(255, 255, 255, 0.46);
  font-size: 11px;
}

.smv-process__links strong {
  font-size: 14px;
}

.smv-seo {
  background: var(--smv-paper);
  color: #09090a;
}

.smv-seo__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(460px, 0.9fr);
  gap: clamp(50px, 10vw, 180px);
}

.smv-seo__copy {
  border-top: 1px solid var(--smv-line-dark);
}

.smv-seo__copy p {
  margin: 0;
  padding-block: 27px;
  border-bottom: 1px solid var(--smv-line-dark);
  color: var(--smv-muted-dark);
  font-size: 16px;
  line-height: 1.82;
}

.smv-faq {
  background: var(--smv-black);
}

.smv-faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(600px, 1.24fr);
  gap: clamp(58px, 9vw, 170px);
}

.smv-faq header {
  position: sticky;
  top: 108px;
  align-self: start;
}

.smv-faq header > p:last-child {
  margin-top: 30px;
}

.smv-faq__items {
  border-top: 1px solid var(--smv-line);
}

.smv-faq details {
  border-bottom: 1px solid var(--smv-line);
}

.smv-faq summary {
  position: relative;
  padding: 30px 56px 30px 0;
  cursor: pointer;
  font-size: clamp(18px, 1.7vw, 25px);
  font-weight: 620;
  line-height: 1.45;
  list-style: none;
}

.smv-faq summary::-webkit-details-marker {
  display: none;
}

.smv-faq summary::after {
  position: absolute;
  top: 50%;
  right: 5px;
  color: var(--smv-red);
  content: "+";
  font-size: 25px;
  font-weight: 300;
  transform: translateY(-50%);
}

.smv-faq details[open] summary::after {
  content: "−";
}

.smv-faq details p {
  max-width: 46em;
  margin: -7px 0 0;
  padding: 0 56px 32px 0;
  color: var(--smv-muted);
  font-size: 15px;
  line-height: 1.8;
}

.smv-close {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background: #060607;
}

.smv-close__image {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 5, 6, 0.98) 4%, rgba(5, 5, 6, 0.82) 47%, rgba(5, 5, 6, 0.28) 100%),
    linear-gradient(0deg, rgba(5, 5, 6, 0.74), transparent 55%),
    url("https://once-1253477534.cos.ap-guangzhou.myqcloud.com/uploads/202607/06/168b96b965a2017c.webp") 76% center / cover no-repeat;
  filter: saturate(0.86) contrast(1.06);
}

.smv-close__layout {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 720px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-block: 86px;
}

.smv-close h2 {
  max-width: 11em;
  margin-bottom: 32px;
  font-size: clamp(48px, 5vw, 82px);
  font-weight: 500;
  letter-spacing: -0.038em;
  line-height: 1.06;
}

.smv-close__layout > p:not(.smv-kicker) {
  max-width: 39em;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 18px;
  line-height: 1.78;
}

@media (max-width: 1240px) {
  .smv-hero__layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(440px, 1.05fr);
    gap: 44px;
  }

  .smv-hero__media {
    min-height: 590px;
  }

  .smv-partner-rail {
    grid-template-columns: repeat(5, 248px);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--smv-red) rgba(255, 255, 255, 0.08);
    scrollbar-width: thin;
  }

  .smv-service-card {
    min-height: 600px;
  }

  .smv-work__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (max-width: 980px) {
  .smv-shell {
    width: min(100% - 40px, 1540px);
  }

  .smv-hero {
    min-height: 0;
  }

  .smv-hero__layout {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: 80px 48px;
  }

  .smv-hero__copy {
    max-width: 760px;
  }

  .smv-hero__media {
    min-height: 720px;
  }

  .smv-section__head,
  .smv-value__layout,
  .smv-seo__layout,
  .smv-faq__layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .smv-positioning__layout {
    grid-template-columns: 90px 1fr;
  }

  .smv-positioning__copy {
    grid-column: 2;
  }

  .smv-value__intro,
  .smv-faq header {
    position: static;
  }

  .smv-service__grid {
    grid-template-columns: 1fr;
  }

  .smv-service-card {
    display: grid;
    grid-template-columns: 0.72fr 1fr;
    column-gap: 34px;
    min-height: 0;
  }

  .smv-service-card__index {
    grid-column: 1 / -1;
    margin-bottom: 72px;
  }

  .smv-service-card h3 {
    align-self: start;
  }

  .smv-service-card > p,
  .smv-service-card ul {
    grid-column: 2;
  }

  .smv-service-card > p {
    min-height: 0;
  }

  .smv-delivery,
  .smv-process__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .smv-work-card,
  .smv-work-card--feature,
  .smv-work-card--wide {
    grid-column: auto;
    grid-row: auto;
  }

  .smv-work-card figure,
  .smv-work-card--feature figure,
  .smv-work-card--wide figure {
    aspect-ratio: 9 / 16;
  }
}

@media (max-width: 720px) {
  .smv-shell {
    width: min(100% - 32px, 1540px);
  }

  .smv-hero__layout {
    padding-top: 66px;
  }

  .smv-hero h1 {
    font-size: clamp(48px, 14vw, 62px);
    line-height: 1.03;
  }

  .smv-hero__promise {
    font-size: 21px;
  }

  .smv-hero__lead {
    font-size: 16px;
  }

  .smv-hero__benefits {
    grid-template-columns: 1fr;
  }

  .smv-hero__benefits li,
  .smv-hero__benefits li + li {
    display: grid;
    grid-template-columns: 42px 1fr;
    min-height: 58px;
    align-items: center;
    padding: 11px 0;
    border-right: 0;
    border-bottom: 1px solid var(--smv-line);
  }

  .smv-hero__benefits li:last-child {
    border-bottom: 0;
  }

  .smv-hero__benefits span {
    margin-top: 0;
  }

  .smv-hero__media {
    min-height: 570px;
  }

  .smv-hero__frame--video {
    left: 24%;
    width: 51%;
  }

  .smv-hero__frame--tool {
    width: 42%;
    height: 39%;
  }

  .smv-hero__frame--pet {
    width: 42%;
    height: 35%;
  }

  .smv-hero__media-note {
    display: none;
  }

  .smv-ticker {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .smv-anchor-nav {
    overflow-x: auto;
  }

  .smv-anchor-nav .smv-shell {
    grid-template-columns: repeat(5, 132px);
    width: max-content;
    margin: 0;
  }

  .smv-anchor-nav a:first-child {
    border-left: 0;
  }

  .smv-positioning__layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .smv-positioning__copy {
    grid-column: auto;
  }

  .smv-positioning h2 {
    font-size: clamp(40px, 10.8vw, 52px);
    line-height: 1.08;
  }

  .smv-section {
    padding-block: 86px;
  }

  .smv-section__head h2,
  .smv-value h2,
  .smv-faq h2,
  .smv-seo h2 {
    font-size: clamp(38px, 10.5vw, 50px);
    line-height: 1.1;
  }

  .smv-partner-rail {
    grid-template-columns: repeat(5, 236px);
    gap: 14px;
  }

  .smv-value__list li {
    grid-template-columns: 42px 1fr;
    gap: 16px;
  }

  .smv-service-card {
    display: block;
    padding: 30px;
  }

  .smv-service-card__index {
    margin-bottom: 86px;
  }

  .smv-service-card > p,
  .smv-service-card ul {
    grid-column: auto;
  }

  .smv-delivery,
  .smv-process__steps,
  .smv-process__links {
    grid-template-columns: 1fr;
  }

  .smv-delivery p {
    min-height: 126px;
  }

  .smv-work .smv-section__head {
    margin-bottom: 30px;
  }

  .smv-work__swipe {
    display: flex;
    align-items: center;
    margin: 0 0 16px;
    color: var(--smv-red-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
  }

  .smv-work__grid {
    display: flex;
    gap: 14px;
    margin-inline: -16px;
    padding: 0 16px 22px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .smv-work__grid::-webkit-scrollbar {
    display: none;
  }

  .smv-work-card,
  .smv-work-card--feature,
  .smv-work-card--wide {
    flex: 0 0 min(78vw, 312px);
    scroll-snap-align: start;
  }

  .smv-work-card figure,
  .smv-work-card--feature figure,
  .smv-work-card--wide figure {
    aspect-ratio: 9 / 16;
  }

  .smv-work-card > div {
    min-height: 132px;
  }

  .smv-process__steps li {
    min-height: 250px;
  }

  .smv-process__steps > li > div {
    margin-top: 70px;
  }

  .smv-process__links a,
  .smv-process__links a:first-child,
  .smv-process__links a + a {
    padding: 20px 0;
    border-left: 0;
  }

  .smv-faq summary {
    padding-right: 42px;
    font-size: 18px;
  }

  .smv-faq details p {
    padding-right: 24px;
  }

  .smv-close,
  .smv-close__layout {
    min-height: 660px;
  }

  .smv-close__image {
    background:
      linear-gradient(0deg, rgba(5, 5, 6, 0.99) 8%, rgba(5, 5, 6, 0.76) 64%, rgba(5, 5, 6, 0.2) 100%),
      url("https://once-1253477534.cos.ap-guangzhou.myqcloud.com/uploads/202607/06/168b96b965a2017c.webp") center 18% / cover no-repeat;
  }

  .smv-close__layout {
    justify-content: flex-end;
    padding-bottom: 70px;
  }

  .smv-close h2 {
    max-width: 10.5em;
    font-size: clamp(36px, 9.2vw, 46px);
    line-height: 1.1;
  }

  .smv-close__layout > p:not(.smv-kicker) {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .smv-shell {
    width: min(100% - 28px, 1540px);
  }

  .smv-hero h1 {
    font-size: clamp(46px, 13.6vw, 56px);
    letter-spacing: -0.04em;
  }

  .smv-hero__trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .smv-hero__trust div {
    display: block;
  }

  .smv-hero__trust dd {
    margin-top: 5px;
  }

  .smv-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .smv-button,
  .smv-text-link {
    width: 100%;
    justify-content: center;
  }

  .smv-hero__media {
    min-height: 500px;
  }

  .smv-partner-rail {
    grid-template-columns: repeat(5, 218px);
  }

  .smv-section__head > p,
  .smv-faq header > p:last-child,
  .smv-value__intro > p:not(.smv-kicker) {
    font-size: 16px;
  }

  .smv-value__list h3 {
    font-size: 27px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-video-v2 *,
  .social-video-v2 *::before,
  .social-video-v2 *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* ONCE SOCIAL MEDIA SHORT VIDEO V2 2026-08-31: END */

/* ONCE SOCIAL MEDIA PORTRAIT CASE GRID 2026-08-31: START */
/* Chinese category 22 is portrait-only. English keeps the shared 16:9 case grid
   until its remaining landscape cases are recategorized. */
html[lang="zh-CN"] .work-grid--portrait {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 38px;
}

html[lang="zh-CN"] .work-grid--portrait .work-card__media {
  aspect-ratio: 9 / 16;
}

html[lang="zh-CN"] .work-grid--portrait .work-card__title {
  font-size: 14px;
  letter-spacing: 0.08em;
}

html[lang="zh-CN"] .work-grid--portrait .work-card__sub {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: 0.12em;
}

html[lang="zh-CN"] .work-grid--portrait .work-card__meta {
  max-width: calc(100% - 92px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 1279px) {
  html[lang="zh-CN"] .work-grid--portrait {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px 16px;
  }
}

@media (max-width: 979px) {
  html[lang="zh-CN"] .work-grid--portrait {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 14px;
  }
}

@media (max-width: 680px) {
  html[lang="zh-CN"] .work-grid--portrait {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 12px;
  }

  html[lang="zh-CN"] .work-grid--portrait .work-card__title {
    min-height: calc(2 * 1.35 * 1em);
    font-size: 13px;
    line-height: 1.35;
    letter-spacing: 0.04em;
  }

  html[lang="zh-CN"] .work-grid--portrait .work-card__row {
    margin-top: 13px;
  }

  html[lang="zh-CN"] .work-grid--portrait .work-card__sub {
    margin-top: 7px;
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  html[lang="zh-CN"] .work-grid--portrait .work-card__meta {
    top: 10px;
    left: 10px;
    max-width: calc(100% - 20px);
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  html[lang="zh-CN"] .work-grid--portrait .work-card__dur {
    display: none;
  }

  html[lang="zh-CN"] .work-grid--portrait .work-card__play svg {
    width: 44px;
    height: 44px;
  }
}
/* ONCE SOCIAL MEDIA PORTRAIT CASE GRID 2026-08-31: END */

/* ONCE H2 LINE COMPOSITION 2026-09-02 */
@media (max-width: 1100px) {
  .once-h2-lines > .once-h2-line,
  .once-solution-v4 .osv4-title-lines > .osv4-title-line {
    display: block;
    white-space: nowrap;
  }

  .once-h2-lines .once-h2-punctuation,
  .once-solution-v4 .osv4-title-lines .osv4-title-punctuation {
    display: none;
  }

  .once-solution-v4 .osv4-section__title.osv4-title-singleline {
    max-width: none;
    white-space: nowrap;
    font-size: 1.875rem;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 820px) {
  .once-solution-v4 .osv4-section__title.osv4-title-lines {
    font-size: clamp(2.125rem, 4.5vw, 2.25rem);
  }

  .once-solution-v4 .osv4-section__title.osv4-title-singleline {
    font-size: clamp(1.75rem, 3.7vw, 1.875rem);
  }
}

@media (max-width: 760px) {
  .once-solution-v4 .osv4-section__title.osv4-title-lines {
    font-size: clamp(1.75rem, 7.8vw, 2rem);
  }

  .once-solution-v4 .osv4-section__title.osv4-title-singleline {
    font-size: clamp(1.5rem, 7.1vw, 1.875rem);
  }
}

@media (max-width: 430px) {
  .once-h2-singleline {
    max-width: none;
    white-space: nowrap;
  }

  .once-h2-singleline--display {
    font-size: clamp(1.5rem, 7.4vw, 2.125rem);
    letter-spacing: 0;
  }

  .once-h2-singleline--sm {
    font-size: clamp(1.375rem, 6.6vw, 1.625rem);
    letter-spacing: 0;
  }
}