:root{
  --ink:#111111;
  --paper:#f1efe9;
  --acid:#ff5a36;
  --line:rgba(17,17,17,.18);
  --pad:clamp(20px,3.2vw,56px);
  --radius:28px;
  /* 顶栏与吸顶导航取相同高度，两者的 align-items:center 就落在同一条中线上。
     导航高度 = 16*2 内边距 + 胶囊(11*2 内边距 + 12 行高 + 2 边框) + 1 下边框 = 69px。
     JS 会用实测值覆盖它，确保换字体/换系统也不偏。 */
  --topbar-h:69px;
  /* "IKIK" 22px/900 字号 + .18em 字距的宽度，给胶囊让位用 */
  --logo-w:62px;
  --nav-indent:calc(var(--pad) + var(--logo-w) + 28px);
  --catnav-h:69px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  /* 必须用 clip 而不是 hidden：hidden 会创建滚动容器，
     position:sticky 会因此完全失效。 */
  overflow-x:clip;
}
a{color:inherit;text-decoration:none}
img{display:block}
.cursor{
  position:fixed;width:12px;height:12px;border-radius:50%;
  background:var(--acid);pointer-events:none;z-index:999;
  transform:translate(-50%,-50%);mix-blend-mode:multiply;
}
.topbar{
  position:fixed;z-index:60;top:0;left:0;width:100%;
  height:var(--topbar-h);
  padding:0 var(--pad);
  display:flex;justify-content:space-between;align-items:center;
  mix-blend-mode:difference;color:#fff;
  /* 顶栏是整宽的 fixed 盒子，即使在视觉上"透明"也会吞掉下方所有点击。
     交出点击权，只把权还给自身链接——否则吸顶导航的胶囊点不动。 */
  pointer-events:none;
}
.topbar a{pointer-events:auto}
.logo{font-size:22px;line-height:1;font-weight:900;letter-spacing:.18em}
.menu{display:flex;gap:24px;font-size:12px;line-height:1;text-transform:uppercase;letter-spacing:.12em}
.back-link{display:flex;gap:8px;align-items:center}
.back-link::before{content:"←"}

.hero{
  min-height:84vh;min-height:84svh;padding:118px var(--pad) 44px;
  display:grid;grid-template-rows:auto 1fr auto;
}
.eyebrow,.kicker{font-size:12px;text-transform:uppercase;letter-spacing:.18em}
.hero h1{
  margin:28px 0 0;
  font-size:clamp(72px,13.5vw,210px);
  line-height:.76;letter-spacing:-.07em;
  text-transform:uppercase;font-weight:900;
  align-self:center;
}
.hero h1 span{display:block;margin-left:15vw}
.hero-bottom{
  display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;
}
.hero-copy{
  max-width:680px;margin:0;
  font-size:clamp(18px,2vw,28px);line-height:1.35;
}
.hero-index{
  justify-self:end;text-align:right;
  font-size:11px;line-height:1.9;
  text-transform:uppercase;letter-spacing:.14em;
}

.marquee{
  overflow:hidden;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:14px 0;white-space:nowrap;
}
.marquee-track{
  display:inline-block;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;animation:marquee 22s linear infinite;
}
@keyframes marquee{to{transform:translateX(-50%)}}

/* 吸到最顶部，和 logo 同一行；z-index 低于 topbar(60)，所以视觉上在 logo 后面。
   胶囊的左右让位在吸顶后由 .is-stuck 加上（JS 判定吸顶）。 */
.category-nav{
  position:sticky;top:0;z-index:40;
  transition:padding-left .28s ease,padding-right .28s ease;
  background:rgba(241,239,233,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding:16px var(--pad);
  display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;
}
.category-nav::-webkit-scrollbar{display:none}
/* 吸顶后往右让开 logo，同时给顶栏右侧菜单留出位置（--menu-w 由 JS 实测写入） */
.category-nav.is-stuck{
  padding-left:var(--nav-indent);
  padding-right:calc(var(--pad) + var(--menu-w,0px) + 24px);
}
.category-nav a{
  flex:none;border:1px solid var(--line);border-radius:999px;
  padding:11px 16px;font-size:10px;line-height:1.2;letter-spacing:.13em;
  text-transform:uppercase;transition:.25s;
}
.category-nav a:hover,.category-nav a.active{background:var(--ink);color:var(--paper)}

.category{
  padding:120px var(--pad) 88px;
}
.category-head{
  display:grid;grid-template-columns:1fr 2fr;gap:30px;
  margin-bottom:58px;align-items:start;
}
.category-title{
  margin:0;font-size:clamp(48px,8vw,120px);
  line-height:.86;letter-spacing:-.055em;
}
.category-title .en{
  display:block;margin-top:10px;
  font-size:.42em;line-height:.95;letter-spacing:-.04em;
}
.category-copy{padding-top:6px;max-width:760px}
.category-copy .lead{
  margin:0 0 28px;font-size:clamp(20px,2vw,29px);
  line-height:1.48;
}
.category-copy .body{
  margin:0;color:#575757;font-size:15px;line-height:1.85;
}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.tags span{
  border:1px solid var(--line);border-radius:999px;
  padding:10px 14px;font-size:10px;text-transform:uppercase;letter-spacing:.12em;
}

/* CAROUSEL */
.carousel-wrap{padding:0 var(--pad) 24px}
.carousel{
  position:relative;border-radius:var(--radius);
  overflow:hidden;background:#222;
}
.carousel-viewport{overflow:hidden}
.carousel-track{
  display:flex;transition:transform .72s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
.slide{
  position:relative;flex:0 0 100%;
  min-height:min(68vw,760px);
}
.slide img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:saturate(.85);
}
.placeholder{
  position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;
}
.placeholder.white{background:#f6f6f3;color:#111}
.placeholder.gray{background:#bdbdb7;color:#111}
.placeholder.black{background:#111;color:#f1efe9}
.placeholder .ph-inner{text-align:center}
.placeholder .ph-no{
  display:block;font-size:clamp(72px,12vw,180px);
  line-height:.8;font-weight:900;letter-spacing:-.07em;
}
.placeholder .ph-label{
  display:block;margin-top:22px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
.slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 58%,rgba(0,0,0,.58));
  pointer-events:none;
}
.slide.placeholder-slide::after{display:none}
.slide-caption{
  position:absolute;z-index:3;left:28px;right:28px;bottom:26px;
  color:#fff;display:flex;justify-content:space-between;align-items:end;gap:20px;
}
.slide-caption strong{
  font-size:clamp(30px,4vw,62px);line-height:.92;
}
.slide-caption small{
  font-size:10px;text-transform:uppercase;letter-spacing:.13em;text-align:right;
}
.carousel-controls{
  position:absolute;z-index:5;left:22px;right:22px;top:50%;
  transform:translateY(-50%);
  display:flex;justify-content:space-between;pointer-events:none;
}
.carousel-btn{
  width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(255,255,255,.7);
  background:rgba(17,17,17,.18);color:#fff;
  backdrop-filter:blur(8px);cursor:pointer;pointer-events:auto;
  font-size:20px;transition:.25s;
}
.carousel-btn:hover{background:#111}
.carousel-footer{
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;padding:16px 2px 0;
}
.carousel-dots{display:flex;gap:8px}
.carousel-dot{
  width:8px;height:8px;border-radius:50%;border:0;
  background:#bbb;cursor:pointer;padding:0;
}
.carousel-dot.active{background:#111}
.carousel-count{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#666;
}

.requirements{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:14px;margin-top:18px;padding:0 var(--pad) 100px;
}
.requirement{
  min-height:190px;padding:24px;
  border:1px solid var(--line);border-radius:20px;
  background:rgba(255,255,255,.16);
}
.requirement b{
  display:block;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:20px;
}
.requirement p{margin:0;font-size:13px;line-height:1.75;color:#555}

.case-ref{
  padding:110px var(--pad);background:var(--ink);color:var(--paper);
}
.case-ref-head{
  display:grid;grid-template-columns:1fr 2fr;gap:30px;margin-bottom:64px;
}
.case-ref h2{
  margin:0;font-size:clamp(48px,8vw,112px);
  line-height:.86;letter-spacing:-.055em;
}
.case-flow{border-top:1px solid rgba(255,255,255,.22)}
.case-step{
  display:grid;grid-template-columns:80px .9fr 1.4fr;
  gap:30px;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.22);
}
.case-num{font-size:11px;color:#92908b;letter-spacing:.12em}
.case-step h3{margin:0;font-size:clamp(23px,2.6vw,42px);line-height:1}
.case-step p{margin:0;color:#aaa;font-size:14px;line-height:1.75;max-width:620px}

.cta{
  margin:var(--pad);
  border-radius:var(--radius);background:var(--acid);
  min-height:68vh;min-height:68svh;padding:var(--pad);
  display:flex;flex-direction:column;justify-content:space-between;
}
.cta h2{
  font-size:clamp(60px,11vw,170px);
  line-height:.94;letter-spacing:-.065em;
  margin:0;max-width:1200px;
}
.cta-row{display:flex;justify-content:space-between;align-items:end;gap:20px}
.cta p{font-size:18px;max-width:520px;line-height:1.5}
.cta a{
  border:1px solid var(--ink);border-radius:999px;
  padding:18px 28px;text-transform:uppercase;
  font-size:12px;letter-spacing:.12em;
}
footer{
  padding:10px var(--pad) 50px;display:flex;
  justify-content:space-between;font-size:12px;
  text-transform:uppercase;letter-spacing:.1em;
}
.reveal{opacity:0;transform:translateY(45px);transition:opacity .8s,transform .8s}
.reveal.show{opacity:1;transform:none}

@media(max-width:900px){
  .menu a:not(.back-link){display:none}
  .hero h1 span{margin-left:0}
  .hero-bottom,.category-head,.case-ref-head{grid-template-columns:1fr}
  .hero-index{justify-self:start;text-align:left}
  .requirements{grid-template-columns:1fr}
  .case-step{grid-template-columns:46px 1fr}
  .case-step p{grid-column:2}
}
@media(max-width:650px){
  .hero{min-height:75vh;min-height:75svh;padding-top:98px}
  .category{padding-top:82px}
  .slide{min-height:70vh;min-height:70svh}
  .slide-caption{align-items:flex-start;flex-direction:column}
  .carousel-controls{left:12px;right:12px}
  .carousel-btn{width:46px;height:46px}
  .cta-row,footer{flex-direction:column;align-items:flex-start}
}
/* 2026-09-30 — 案例图片位与案例详情页图集
   沿用 .case-ref 的黑底与 --radius / 白色细线语言。占位符为 2 列 6 格；
   真实图片保持作品原比例不裁切（案例图是设计作品，裁掉就是丢内容）。 */
/* 多列（masonry）而不是网格：网格的行高由同行最高的图决定，
   本项目图集宽高比最极端差 7.3 倍（0.55 竖图 vs 4.0 宽横幅），
   矮图下方会空出一大块。多列让图片依次往下填满，不留空档，且完全不裁切作品。 */
.case-gallery{
  column-count:2;column-gap:18px;
}
.case-gallery > *{
  display:block;width:100%;margin:0 0 18px;
  break-inside:avoid;page-break-inside:avoid;-webkit-column-break-inside:avoid;
}
/* 超宽横幅（长宽比 >2.4）横跨整行，否则挤在单列里会被压成一条细缝，
   看起来就像图片丢了（例如壳牌 700x192 在 662px 列里只有 182px 高）。 */
.case-gallery > img.wide{column-span:all}
.case-gallery .placeholder{
  position:relative;inset:auto;
  aspect-ratio:4/3;
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius);
  background:rgba(255,255,255,.05);
  overflow:hidden;
  transition:background .3s ease;
}
.case-gallery .placeholder:hover{background:rgba(255,255,255,.09)}
.case-gallery .ph-no{
  font-size:clamp(38px,4.6vw,72px);line-height:.8;
  letter-spacing:-.06em;font-weight:900;
}
.case-gallery .ph-label{margin-top:16px}
.case-gallery img{
  display:block;width:100%;height:auto;
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius);
}
@media(max-width:800px){
  .case-gallery{column-count:1;column-gap:0}
  .case-gallery > *{margin-bottom:14px}
}

/* 2026-09-30 — 分类页案例入口格 / 单图轮播
   一格一个案例，沿用黑底 + --radius + 白色细线语言；标题条复用轮播的 .slide-caption 叠层 */
.carousel.single .carousel-controls{display:none}
.case-tile{
  position:relative;display:block;overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius);
  transition:border-color .3s ease;
}
.case-gallery .case-tile img{
  display:block;width:100%;height:auto;border:0;border-radius:0;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.case-tile::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(transparent 55%,rgba(0,0,0,.62));
}
.case-tile:hover{border-color:rgba(255,255,255,.5)}
.case-tile:hover img{transform:scale(1.04)}
.case-gallery .case-tile .slide-caption{left:20px;right:20px;bottom:18px;gap:14px}
.case-gallery .case-tile .slide-caption strong{font-size:clamp(17px,1.6vw,26px)}
.case-gallery .case-tile .slide-caption small{font-size:10px}

/* 2026-09-30 — 吸顶导航会盖住锚点目标，跳转时留出顶栏+导航的高度 */
[id]{scroll-margin-top:calc(var(--catnav-h) + 14px)}

/* ---------------------------------------------------------------
   窄屏：吸顶导航改成吸在顶栏正下方、左右对称。
   桌面端胶囊要在同一行往右让开 logo（左 108px）并避开右侧返回链接（右 173px），
   但在 320px 的屏上这 281px 让位只剩 39px 给胶囊，等于看不见。
   --------------------------------------------------------------- */
@media(max-width:900px){
  .category-nav{top:var(--topbar-h)}
  .category-nav.is-stuck{padding-left:var(--pad);padding-right:var(--pad)}
  [id]{scroll-margin-top:calc(var(--topbar-h) + var(--catnav-h) + 12px)}
}
/* === 联系我们页：手机号主视觉（生成脚本维护，勿手改） === */
/* 手机号一行显示；+86 与号码**同款字体同色**，只是缩小到 0.42em。
   字号上下界经字体度量校验：真正的约束来自 .category-copy 的
   max-width:760px（不是视口宽度）。clamp(32px,6.6vw,96px) + 内联 +86
   在 320–1920px 全区间零溢出，桌面端占用容器 90%。
   改字号前请先跑 _分析/fit-tel-inline.py 复算。 */
.tel-link{
  display:inline-block;margin:30px 0 0;
  font-size:clamp(32px,6.6vw,96px);line-height:1.06;font-weight:900;
  letter-spacing:-.02em;color:var(--ink);text-decoration:none;
  font-variant-numeric:tabular-nums;
  border-bottom:2px solid var(--line);padding-bottom:.06em;
  transition:color .25s,border-color .25s;
}
.tel-link:hover{color:var(--acid);border-color:var(--acid)}
.tel-cc{font-size:.42em}
/* .category-copy 原本 max-width:760px。这段 53 字的正文在视口 >=1440px 时
   字号顶到 29px 上限，760px 会被挤成 3 行、最后一行只剩「题。」。
   按字体度量，2 行需要 >=786px；放宽到 840px 留出余量
   （Windows 微软雅黑 / macOS PingFang 度量略有差异）。
   只作用于本页 #phone 区块，不影响其他分类页与案例页的正文宽度。 */
#phone .category-copy{max-width:840px}
.tel-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.tel-copy{
  display:inline-block;background:none;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;
  padding:12px 22px;font:inherit;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;transition:.25s;
}
.tel-copy:hover,.tel-copy[data-done="1"]{
  background:var(--ink);color:var(--paper);border-color:var(--ink);
}