/* ============================================================
   REILY 力莱战略包装设计
   视觉语言：纯黑底 / 满幅图片墙 / 细线 / 小号无衬线
   ============================================================ */

:root{
  --ink:#0a0a0a;
  --fg:#f2f2f0;
  --muted:rgba(242,242,240,.52);
  --dim:rgba(242,242,240,.34);
  --line:rgba(242,242,240,.16);
  --line-soft:rgba(242,242,240,.08);
  --blue:#1b2fd6;
  --pad:28px;
  --nav-h:56px;
  --sans:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--fg);
  font-family:var(--sans);font-size:14px;line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400}
::selection{background:var(--fg);color:var(--ink)}

.label{
  font-size:11px;line-height:1.5;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.label--mid{text-align:center;color:var(--dim)}
.label--right{text-align:right;justify-self:end}
.label--dim{color:var(--dim)}

/* ---------- 载入 ---------- */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--ink);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--pad);transition:opacity .8s var(--ease),visibility .8s;
}
.loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.loader__bar{height:1px;background:var(--line-soft);position:relative;overflow:hidden}
.loader__bar span{position:absolute;left:0;top:0;height:100%;width:0;background:var(--fg);transition:width .45s linear}
.loader__foot{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:14px;font-size:11px;letter-spacing:.16em;color:var(--muted);
  text-transform:uppercase;
}

/* ---------- 光标 ---------- */
.cursor{position:fixed;top:0;left:0;z-index:190;pointer-events:none;display:none}
.cursor__dot{
  position:absolute;width:5px;height:5px;border-radius:50%;background:var(--fg);
  transform:translate(-50%,-50%);transition:opacity .3s;
}
.cursor__ring{
  position:absolute;display:flex;align-items:center;justify-content:center;
  width:74px;height:74px;border-radius:50%;
  transform:translate(-50%,-50%) scale(.35);
  background:rgba(242,242,240,.96);color:var(--ink);
  opacity:0;transition:transform .45s var(--ease),opacity .3s;
}
.cursor__text{font-size:11px;letter-spacing:.12em;white-space:nowrap}
.cursor.is-hover .cursor__ring{transform:translate(-50%,-50%) scale(1);opacity:1}
.cursor.is-hover .cursor__dot{opacity:0}
@media (hover:hover) and (pointer:fine){
  .cursor{display:block}
  body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none}
}

/* ---------- 导航 ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);
  background:rgba(10,10,10,.68);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line-soft);
  transition:background .4s var(--ease);
}
.nav__logo{display:flex;align-items:center;gap:10px}
.nav__mark{width:19px;height:19px;flex:none}
.nav__name{font-size:13px;letter-spacing:.2em}
.nav__en{
  font-size:8.5px;line-height:1.35;letter-spacing:.14em;
  color:var(--dim);text-transform:uppercase;padding-left:2px;
}
.nav__links{display:flex;align-items:center}
.nav__link{
  position:relative;font-size:12.5px;letter-spacing:.08em;
  padding:0 20px;color:rgba(242,242,240,.72);
  transition:color .3s;
}
.nav__link:last-child{padding-right:0}
.nav__link:first-child{padding-left:0}
.nav__link + .nav__link::before{
  content:'';position:absolute;left:0;top:50%;width:1px;height:10px;
  transform:translateY(-50%);background:rgba(242,242,240,.24);
}
.nav__link:hover,.nav__link.is-on{color:var(--fg)}
.nav__toggle{display:none;width:34px;height:34px;position:relative;margin-right:-6px}
.nav__toggle span{
  position:absolute;left:6px;right:6px;height:1px;background:currentColor;
  transition:transform .4s var(--ease),opacity .3s;
}
.nav__toggle span:nth-child(1){top:14px}
.nav__toggle span:nth-child(2){top:20px}
body.menu-open .nav__toggle span:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu-open .nav__toggle span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* ---------- 移动菜单 ---------- */
.menu{
  position:fixed;inset:0;z-index:70;background:var(--ink);
  padding:var(--nav-h) var(--pad) 32px;
  display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
body.menu-open .menu{opacity:1;visibility:visible}
.menu__list{display:flex;flex-direction:column;justify-content:center;flex:1}
.menu__list li{overflow:hidden;border-bottom:1px solid var(--line-soft)}
.menu__list a{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:18px 0;font-size:26px;letter-spacing:.04em;
  transform:translateY(110%);transition:transform .7s var(--ease);
}
body.menu-open .menu__list a{transform:none}
.menu__list em{font-style:normal;font-size:10px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}
.menu__foot{display:flex;flex-direction:column;gap:10px;font-size:12px;color:var(--muted)}
.menu__foot a{color:var(--fg);font-size:16px;letter-spacing:.04em}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;height:100svh;min-height:600px;overflow:hidden;background:#000;
  padding-top:var(--nav-h);
}
.hero__panes{display:grid;grid-template-columns:repeat(3,1fr);height:100%;width:100%}
.pane{position:relative;display:block;overflow:hidden;background:#0f0f0f}
.pane + .pane{border-left:1px solid rgba(0,0,0,.55)}
.pane__img{position:absolute;inset:0;overflow:hidden}
.pane__img img{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  transform:scale(1);transition:transform 1.4s var(--ease),filter .6s;
  filter:saturate(.94) contrast(1.02);
}
.pane:hover .pane__img img{transform:scale(1.045);filter:saturate(1) contrast(1.04)}
.pane__tag{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:11px 14px;font-size:11px;letter-spacing:.1em;
  color:rgba(255,255,255,.82);
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent);
  transform:translateY(6px);opacity:.72;
  transition:transform .5s var(--ease),opacity .4s;
}
.pane:hover .pane__tag{transform:none;opacity:1}

.hero__scrim{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(to top,rgba(10,10,10,.94) 0%,rgba(10,10,10,.55) 22%,rgba(10,10,10,0) 54%),
    linear-gradient(to bottom,rgba(10,10,10,.5) 0%,rgba(10,10,10,0) 16%);
}
.hero__meta{position:absolute;left:var(--pad);bottom:26px;z-index:4;max-width:640px}
.hero__eyebrow{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(242,242,240,.6);margin-bottom:12px;
}
.hero__title{font-size:clamp(23px,2.5vw,36px);font-weight:300;line-height:1.5;letter-spacing:.02em}
.hero__ctrl{
  position:absolute;right:var(--pad);bottom:26px;z-index:4;
  display:flex;align-items:center;gap:20px;
}
.hero__count{font-size:11px;letter-spacing:.14em;color:var(--muted)}
.hero__count b{color:var(--fg);font-weight:400}
.hero__btns{display:flex;gap:8px}
.rbtn{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(242,242,240,.34);
  display:flex;align-items:center;justify-content:center;color:var(--fg);
  transition:background .3s,color .3s,border-color .3s;
}
.rbtn svg{width:18px;height:18px}
.rbtn:hover{background:var(--fg);color:var(--ink);border-color:var(--fg)}

/* ---------- 细线标题条 ---------- */
.bar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:16px;padding:13px var(--pad);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.bar--head{border-bottom:0}

/* ---------- 图片墙 ---------- */
.wall{display:grid;grid-template-columns:repeat(3,1fr);align-items:start}
.wall__col{display:flex;flex-direction:column;border-right:1px solid var(--line-soft)}
.wall__col:last-child{border-right:0}

.tile{display:block;position:relative}
.tile__fig{position:relative;overflow:hidden;background:#101010;aspect-ratio:9/16}
.tile--b .tile__fig{aspect-ratio:9/16}
.tile--c .tile__fig{aspect-ratio:9/16}
.tile--d .tile__fig{aspect-ratio:9/16}
.tile__fig img{
  width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  transform:scale(1);transition:transform 1.3s var(--ease);
}
.tile:hover .tile__fig img{transform:scale(1.05)}
.tile__fig::after{
  content:'';position:absolute;inset:0;background:rgba(10,10,10,0);
  transition:background .5s;
}
.tile:hover .tile__fig::after{background:rgba(10,10,10,.16)}

.tile__cap{
  display:flex;align-items:baseline;gap:12px;
  padding:11px 14px 13px;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  font-size:11.5px;letter-spacing:.02em;
}
.tile__no{color:var(--dim);font-variant-numeric:tabular-nums;font-size:10.5px;letter-spacing:.08em}
.tile__name{white-space:nowrap}
.tile__cat{color:var(--dim);margin-left:auto;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile__go{
  position:absolute;right:14px;top:14px;z-index:2;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;opacity:0;transform:translateY(-4px);
  transition:opacity .4s,transform .4s var(--ease);
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}
.tile:hover .tile__go{opacity:.9;transform:none}

.rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.is-in{opacity:1;transform:none}

/* ---------- 关于 ---------- */
.about{padding-bottom:clamp(60px,9vh,110px)}
.about__grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:24px;
  padding:clamp(46px,7vh,86px) var(--pad) 0;
}
.about__side{grid-column:1/4}
.about__quote{font-size:clamp(17px,1.55vw,22px);line-height:1.85;letter-spacing:.02em;font-weight:300}
.about__side .label{margin-top:22px}
.about__main{grid-column:4/13}
.about__lead{
  font-size:clamp(19px,2.05vw,30px);line-height:1.78;font-weight:300;
  letter-spacing:.01em;max-width:26em;
}
.about__cols{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);
  margin-top:clamp(26px,3.4vh,40px);
  font-size:13px;line-height:2.05;color:var(--muted);
}
.about__caps{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(26px,3.4vh,40px)}
.about__caps li{
  border:1px solid var(--line);padding:6px 13px;
  font-size:11px;letter-spacing:.1em;color:rgba(242,242,240,.66);
}
.about__stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  margin-top:clamp(34px,4.6vh,56px);padding-top:18px;border-top:1px solid var(--line);
}
.about__stats span{font-size:clamp(26px,2.6vw,40px);font-weight:300;line-height:1;letter-spacing:-.01em}
.about__stats em{font-style:normal;font-size:11px;color:var(--dim);margin-left:5px}
.about__stats p{font-size:11px;color:var(--dim);margin-top:10px;letter-spacing:.04em}

/* ---------- 索引 ---------- */
.index{padding-bottom:clamp(60px,9vh,110px)}
.index__grid{
  display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(32px,5vw,80px);
  padding:clamp(28px,4vh,44px) var(--pad) 0;
}
.index__cap{margin-bottom:6px}
.list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:9px 0;border-bottom:1px solid var(--line-soft);
  font-size:12.5px;letter-spacing:.02em;
}
.list em{
  font-style:normal;font-size:10.5px;letter-spacing:.1em;
  color:var(--dim);text-transform:uppercase;text-align:right;flex:none;
}
.list--clients{column-count:2;column-gap:clamp(24px,3vw,48px)}
.list--clients li{break-inside:avoid}
.list--awards em{letter-spacing:.04em;text-transform:none}

/* ---------- 页脚 ---------- */
.contact{border-top:1px solid var(--line);padding-bottom:22px}
.contact__note{
  font-size:13px;color:var(--muted);letter-spacing:.02em;
  padding:clamp(40px,6vh,70px) var(--pad) 0;
}
.contact__tel{
  display:inline-flex;align-items:center;gap:14px;
  margin:14px var(--pad) clamp(40px,6.5vh,76px);
  font-size:clamp(28px,4.2vw,62px);font-weight:300;letter-spacing:.01em;line-height:1.1;
}
.contact__tel svg{width:.44em;height:.44em;opacity:.6;transition:transform .4s var(--ease)}
.contact__tel:hover svg{transform:translate(4px,-4px)}
.contact__info{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);
  padding:0 var(--pad);
  font-size:12px;line-height:2;color:rgba(242,242,240,.7);
}
.contact__info .label{display:block;margin-bottom:8px}
.contact__info a{border-bottom:1px solid var(--line);padding-bottom:1px}
.contact__info a:hover{border-color:var(--fg)}
.contact__bottom{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  margin:clamp(44px,7vh,80px) var(--pad) 0;padding-top:16px;
  border-top:1px solid var(--line-soft);
  font-size:10.5px;letter-spacing:.06em;color:var(--dim);
}
.to-top{transition:color .3s}
.to-top:hover{color:var(--fg)}

/* ---------- 案例详情 ---------- */
.case{
  position:fixed;inset:0;z-index:120;background:var(--ink);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
}
.case.is-open{opacity:1;visibility:visible}
.case__bar{
  height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);border-bottom:1px solid var(--line-soft);
}
.case__idx{font-size:11px;letter-spacing:.18em;color:var(--muted);font-variant-numeric:tabular-nums}
.case__close{
  width:34px;height:34px;margin-right:-6px;display:flex;align-items:center;justify-content:center;
  transition:transform .4s var(--ease);
}
.case__close svg{width:20px;height:20px}
.case__close:hover{transform:rotate(90deg)}
.case__scroll{height:calc(100% - var(--nav-h));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

.case__head{padding:clamp(36px,6vh,72px) var(--pad) 26px;max-width:1180px}
.case__title{font-size:clamp(34px,5vw,68px);font-weight:300;line-height:1.12;letter-spacing:-.012em;margin-top:14px}
.case__sub{font-size:clamp(12.5px,1.15vw,15px);color:var(--muted);margin-top:16px;letter-spacing:.02em}

.case__meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  padding:0 var(--pad) clamp(26px,4vh,40px);max-width:1180px;
}
.case__meta div{border-top:1px solid var(--line);padding-top:10px}
.case__meta dt{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.case__meta dd{margin:0;font-size:12px;line-height:1.8;color:rgba(242,242,240,.8)}

.case__cover{margin:0;width:100%;height:min(74vh,720px);overflow:hidden;background:#101010}
.case__cover img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}

.case__body{
  max-width:820px;padding:clamp(36px,6vh,64px) var(--pad);
  font-size:14px;line-height:2.15;color:rgba(242,242,240,.76);
}
.case__body p + p{margin-top:1.15em}
.case__body .lead{
  font-size:clamp(16px,1.5vw,21px);line-height:1.9;color:var(--fg);
  font-weight:300;margin-bottom:1em;
}

.case__album{display:flex;flex-direction:column;align-items:center;background:#080808}
.case__album figure{margin:0;width:100%;max-width:860px;border-top:1px solid var(--line-soft)}
.case__album img{width:100%;height:auto}
.case__album figcaption{
  padding:10px 14px 14px;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);
}

.case__next{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  width:100%;text-align:left;padding:clamp(56px,9vh,110px) var(--pad);
  border-top:1px solid var(--line);
  transition:background .4s;
}
.case__next:hover{background:#0e0e0e}
.case__next-name{
  display:flex;align-items:center;gap:18px;
  font-size:clamp(24px,3.4vw,48px);font-weight:300;letter-spacing:-.01em;
}
.case__next-name svg{width:.7em;height:.7em;opacity:.5;transition:transform .5s var(--ease)}
.case__next:hover .case__next-name svg{transform:translateX(10px);opacity:1}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  :root{--pad:22px}
  .about__side{grid-column:1/5}
  .about__main{grid-column:5/13}
  .index__grid{grid-template-columns:1fr;gap:44px}
  .contact__info{grid-template-columns:repeat(2,1fr);gap:28px}
}

@media (max-width:820px){
  :root{--pad:18px}
  .nav__links{display:none}
  .nav__toggle{display:block}
  .nav__en{display:none}

  .hero{height:88svh;min-height:520px}
  .hero__panes{
    grid-template-columns:100vw;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  .hero__panes::-webkit-scrollbar{display:none}
  .pane{scroll-snap-align:start}
  .pane + .pane{border-left:0}
  .pane__tag{display:none}
  .hero__meta{bottom:22px;right:var(--pad)}
  .hero__ctrl{bottom:auto;top:calc(var(--nav-h) + 16px);left:var(--pad);right:auto}
  .hero__btns .rbtn{background:rgba(10,10,10,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

  .wall{grid-template-columns:1fr}
  .wall__col{border-right:0}

  .about__grid{grid-template-columns:1fr;gap:30px}
  .about__side,.about__main{grid-column:1/-1}
  .about__cols{grid-template-columns:1fr;gap:18px}
  .about__stats{grid-template-columns:repeat(2,1fr);row-gap:26px}

  .list--clients{column-count:1}

  .case__meta{grid-template-columns:repeat(2,1fr)}
  .case__cover{height:56vh}
  .case__body{font-size:13.5px}
}

@media (max-width:560px){
  .tile--b .tile__fig,.tile--c .tile__fig,.tile--d .tile__fig{aspect-ratio:3/4}
  .bar{grid-template-columns:1fr auto;gap:10px}
  .bar .label--mid{display:none}
  .contact__info{grid-template-columns:1fr;gap:22px}
  .contact__bottom{flex-direction:column;align-items:flex-start;gap:8px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}