:root {
  --o:#f26830;
  --k:#090909;
  --p:#f4f0e8;
  --m:#bde6d2
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--k);
  color:#fff;
  font-family:"Noto Sans JP","Yu Gothic",sans-serif;
  overflow-x:hidden
}
a {
  color:inherit;
  text-decoration:none
}
img {
  display:block;
  width:100%
}
.bar {
  height:28px;
  background:var(--o);
  color:#111;
  overflow:hidden;
  white-space:nowrap;
  font:800 11px/28px sans-serif;
  letter-spacing:.15em
}
.bar span,.ticker span {
  display:inline-block;
  width:max-content;
  animation:roll 22s linear infinite
}
@keyframes roll {
  to {
    transform:translateX(-50%)
  }
}
.hero {
  height:calc(100svh - 28px);
  min-height:650px;
  position:relative;
  overflow:hidden
}
.slides,.slide {
  position:absolute;
  inset:0
}
.slide {
  opacity:0;
  animation:show 18s infinite
}
.slide:nth-child(2) {
  animation-delay:6s
}
.slide:nth-child(3) {
  animation-delay:12s
}
.slide img {
  height:100%;
  object-fit:cover;
  filter:saturate(.85)
}
.slide:nth-child(1) img {
  object-position:62%
}
.slide:nth-child(2) img {
  object-position:54% 35%
}
.slide:nth-child(3) img {
  object-position:63%
}
@keyframes show {
  0% {
    opacity:0;
    transform:scale(1.04)
  }
  5%,30% {
    opacity:1;
    transform:scale(1)
  }
  36%,100% {
    opacity:0
  }
}
.shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#000c,transparent 64%),linear-gradient(0deg,#000b,transparent 38%)
}
header {
  position:absolute;
  z-index:3;
  inset:0 0 auto;
  padding:30px 38px;
  display:flex;
  justify-content:space-between
}
.logo {
  width:190px;
  filter:brightness(0) invert(1)
}
nav {
  display:flex;
  gap:26px;
  font:800 12px sans-serif;
  letter-spacing:.12em
}
.statement {
  position:absolute;
  z-index:2;
  left:5vw;
  top:50%;
  transform:translateY(-45%)
}
.label {
  font:800 11px sans-serif;
  letter-spacing:.2em;
  text-transform:uppercase
}
.ey {
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:25px
}
.ey:before {
  content:"";
  width:44px;
  height:3px;
  background:var(--o)
}
h1,.lead {
  margin:0;
  font-size:clamp(46px,5.5vw,92px);
  line-height:1.03;
  letter-spacing:-.075em;
  font-weight:900
}
h1 {
  white-space:nowrap
}
.orange,.lead em {
  color:var(--o);
  font-style:normal
}
.sub {
  max-width:460px;
  font-size:15px;
  line-height:1.9;
  margin-top:28px
}
.scroll {
  position:absolute;
  z-index:3;
  right:38px;
  bottom:28px;
  font:700 10px sans-serif;
  letter-spacing:.16em
}
.peek {
  height:18px;
  background:linear-gradient(90deg,var(--o) 34%,var(--p) 34% 67%,var(--m) 67%)
}
.body {
  font-size:16px;
  line-height:2;
  letter-spacing:.03em
}
.manifest {
  display:grid;
  grid-template-columns:58% 42%;
  background:var(--p);
  color:#111;
  min-height:760px
}
.manifest .copy {
  padding:10vw 7vw
}
.manifest .label {
  margin-bottom:38px
}
.manifest .body {
  max-width:650px;
  margin-top:45px
}
.photo {
  position:relative;
  overflow:hidden
}
.photo img {
  height:100%;
  object-fit:cover;
  object-position:54% 32%
}
.stamp {
  position:absolute;
  left:-65px;
  bottom:45px;
  width:155px;
  height:155px;
  border-radius:50%;
  background:var(--o);
  display:grid;
  place-content:center;
  text-align:center;
  font-weight:900;
  animation:wob 4s ease-in-out infinite
}
@keyframes wob {
  50% {
    transform:rotate(10deg)
  }
}
.ticker {
  background:var(--o);
  color:#111;
  overflow:hidden;
  white-space:nowrap;
  padding:15px 0;
  font-size:clamp(24px,3vw,44px);
  font-weight:900
}
.system {
  padding:9vw 5vw
}
.head {
  display:grid;
  grid-template-columns:1fr .75fr;
  gap:9vw;
  align-items:end;
  margin-bottom:7vw
}
.head .body {
  color:#bbb
}
.chapter {
  border-top:1px solid #666;
  padding:65px 0;
  display:grid;
  grid-template-columns:80px minmax(260px,.8fr) 1.2fr;
  gap:4vw
}
.num {
  color:var(--o);
  font:800 13px monospace
}
.chapter h3 {
  font-size:clamp(42px,5vw,76px);
  line-height:1.02;
  letter-spacing:-.06em;
  margin:0
}
.chapter .intro {
  color:#aaa;
  line-height:1.8;
  font-size:14px
}
.week {
  display:grid;
  grid-template-columns:repeat(8,1fr);
  border:1px solid #555
}
.week span {
  text-align:center;
  padding:17px 2px;
  border-right:1px solid #555;
  font-size:12px;
  font-weight:900
}
.week .hot {
  background:var(--o);
  color:#111
}
.details {
  list-style:none;
  padding:0;
  margin:25px 0
}
.details li {
  display:grid;
  grid-template-columns:110px 1fr;
  gap:18px;
  padding:16px 0;
  border-top:1px solid #444;
  font-size:14px;
  line-height:1.7
}
.details b {
  color:var(--o)
}
.staff {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px
}
.staff span {
  border:1px solid #444;
  background:#181818;
  padding:18px 8px;
  text-align:center;
  font-size:13px;
  font-weight:800
}
.loop div {
  display:grid;
  grid-template-columns:1fr 35px 1.7fr;
  align-items:center;
  padding:17px 0;
  border-top:1px solid #444
}
.loop i {
  font-style:normal;
  color:var(--o)
}
.loop small {
  color:#aaa;
  line-height:1.6
}
.perm {
  background:var(--m);
  color:#111
}
.perm-top {
  display:grid;
  grid-template-columns:46% 54%;
  min-height:760px
}
.perm .photo img {
  object-position:62%
}
.perm-copy {
  padding:9vw 7vw;
  align-self:center
}
.perm-copy .label {
  margin-bottom:34px
}
.perm-copy .body {
  margin-top:40px
}
.journey {
  background:var(--p);
  padding:45px 5vw 7vw
}
.journey-title {
  display:flex;
  justify-content:space-between;
  border-bottom:3px solid #111;
  padding-bottom:24px;
  font:800 13px sans-serif;
  letter-spacing:.13em
}
.steps,.benefits {
  display:grid;
  grid-template-columns:repeat(4,1fr)
}
.step {
  padding:38px 26px;
  border-right:1px solid #aaa;
  min-height:300px
}
.step:last-child {
  border:0
}
.step h4 {
  font-size:28px;
  margin:45px 0 15px
}
.step p,.benefit p {
  font-size:13px;
  line-height:1.8
}
.step .num {
  color:var(--o)
}
.benefits {
  background:var(--o);
  color:#111
}
.benefit {
  padding:38px 28px;
  border-right:1px solid #111
}
.benefit b {
  font-size:clamp(22px,2.4vw,34px)
}
.compare {
  display:grid;
  grid-template-columns:1fr 1fr
}
.compare>div {
  padding:6vw 5vw
}
.compare>div:first-child {
  color:#888;
  border-right:1px solid #444
}
.compare h3 {
  font-size:clamp(28px,3vw,46px);
  margin:18px 0 35px
}
.flow {
  padding:16px 0;
  border-top:1px solid;
  font-size:14px
}
.flow b {
  color:var(--o);
  margin-right:18px
}
.portrait {
  height:min(82vw,900px);
  min-height:650px;
  position:relative
}
.portrait img {
  height:100%;
  object-fit:cover;
  object-position:62%;
  filter:brightness(.7)
}
.portrait:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#000e,transparent 60%)
}
.identity {
  position:absolute;
  z-index:2;
  left:5vw;
  right:5vw;
  bottom:5vw;
  display:flex;
  align-items:end;
  justify-content:space-between
}
.identity h2 {
  font-size:clamp(50px,7vw,110px);
  line-height:.9;
  margin:10px 0 0
}
.social {
  background:var(--o);
  color:#111;
  padding:22px 28px;
  font-weight:900;
  transform:rotate(-2deg)
}
.social small {
  margin-right:30px
}
.insta {
  padding:6vw 5vw 8vw
}
.insta-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:28px
}
.insta h3 {
  font-size:clamp(30px,4vw,58px);
  margin:10px 0 0
}
.grid3 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px
}
.post {
  aspect-ratio:1;
  overflow:hidden;
  position:relative
}
.post img {
  height:100%;
  object-fit:cover;
  transition:.5s
}
.post:hover img {
  transform:scale(1.06)
}
.post:after {
  content:"VIEW ↗";
  position:absolute;
  right:10px;
  bottom:10px;
  background:var(--o);
  color:#111;
  padding:9px;
  font:900 10px sans-serif
}
.stance {
  display:grid;
  grid-template-columns:1fr 1fr;
  color:#111
}
.stance>div {
  padding:8vw 5vw
}
.old {
  background:#e7e2d8
}
.new {
  background:var(--o)
}
.stance h2 {
  font-size:clamp(34px,4vw,62px);
  margin:20px 0 45px
}
.stance ul {
  list-style:none;
  padding:0;
  border-top:2px solid
}
.stance li {
  padding:17px 0;
  border-bottom:1px solid #0006;
  font-weight:700
}
.new li:before {
  content:"→";
  margin-right:16px
}
.company {
  padding:9vw 5vw 4vw
}
.company-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8vw;
  margin-top:65px
}
.company-note {
  font-size:clamp(30px,4vw,62px);
  line-height:1.17;
  margin:0
}
.company dl {
  margin:0
}
.company dl div {
  display:grid;
  grid-template-columns:130px 1fr;
  padding:18px 0;
  border-top:1px solid #555;
  font-size:14px;
  line-height:1.7
}
.company dt {
  color:#999
}
.company dd {
  margin:0
}
footer {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-top:100px;
  border-top:1px solid #555;
  padding-top:25px;
  color:#999;
  font-size:11px
}
.reveal {
  opacity:0;
  transform:translateY(38px);
  transition:.8s
}
.reveal.in {
  opacity:1;
  transform:none
}
@media(max-width:760px) {
  header {
    padding:22px 20px
  }
  .logo {
    width:145px
  }
  nav {
    display:none
  }
  .statement {
    left:20px;
    right:20px;
    top:auto;
    bottom:110px;
    transform:none
  }
  h1 {
    font-size:6.8vw
  }
  .sub {
    font-size:13px;
    max-width:320px
  }
  .scroll {
    right:20px
  }
  .manifest {
    display:block;
    min-height:0
  }
  .manifest .copy {
    padding:85px 20px 65px
  }
  .manifest .body,.body {
    font-size:15px
  }
  .manifest .photo {
    height:68svh;
    min-height:520px
  }
  .stamp {
    left:18px;
    width:115px;
    height:115px;
    font-size:13px
  }
  .system {
    padding:80px 20px
  }
  .head,.chapter {
    display:block
  }
  .head {
    margin-bottom:65px
  }
  .head .body {
    margin-top:25px
  }
  .chapter {
    padding:42px 0
  }
  .chapter .num {
    margin-bottom:18px
  }
  .chapter h3 {
    font-size:42px
  }
  .chapter .intro {
    margin:18px 0 32px
  }
  .week span {
    font-size:10px;
    padding:12px 0
  }
  .details li {
    grid-template-columns:82px 1fr;
    gap:10px;
    font-size:13px
  }
  .staff {
    grid-template-columns:1fr
  }
  .staff span {
    text-align:left
  }
  .loop div {
    grid-template-columns:.8fr 25px 1.4fr;
    gap:4px
  }
  .loop small {
    font-size:11px
  }
  .perm-top {
    display:flex;
    flex-direction:column;
    min-height:0
  }
  .perm .photo {
    height:60svh;
    min-height:430px
  }
  .perm-copy {
    padding:65px 20px
  }
  .journey {
    padding:40px 20px 65px
  }
  .journey-title {
    gap:20px
  }
  .steps {
    display:block
  }
  .step {
    min-height:0;
    border-right:0;
    border-bottom:1px solid #aaa;
    padding:32px 5px
  }
  .step h4 {
    margin:15px 0
  }
  .benefits {
    grid-template-columns:1fr 1fr
  }
  .benefit {
    padding:27px 20px;
    border-bottom:1px solid
  }
  .compare {
    display:block
  }
  .compare>div {
    padding:65px 20px
  }
  .compare>div:first-child {
    border-right:0;
    border-bottom:1px solid #444
  }
  .portrait {
    height:76svh;
    min-height:600px
  }
  .identity {
    left:20px;
    right:20px;
    bottom:28px;
    display:block
  }
  .identity h2 {
    font-size:58px
  }
  .social {
    margin-top:28px;
    padding:18px 20px
  }
  .social small {
    display:block;
    margin:0 0 7px
  }
  .insta {
    padding:65px 20px
  }
  .insta-head {
    display:block
  }
  .grid3 {
    gap:5px
  }
  .stance {
    display:block
  }
  .stance>div {
    padding:70px 20px
  }
  .company {
    padding:80px 20px 30px
  }
  .company-grid {
    display:block
  }
  .company dl {
    margin-top:50px
  }
  .company dl div {
    grid-template-columns:100px minmax(0,1fr);
    font-size:13px;
    overflow-wrap:anywhere
  }
  footer {
    display:block;
    line-height:2
  }
  footer .logo {
    margin-bottom:18px
  }
}
/* KVの緊張感を下層まで通す */
.system {
  position:relative;
  isolation:isolate;
  background:#080808
}
.system:before {
  content:"365";
  position:sticky;
  top:8vh;
  float:right;
  margin-right:-2vw;
  height:0;
  color:#ffffff08;
  font:900 32vw/.7 Arial;
  letter-spacing:-.12em;
  z-index:-1
}
.chapter {
  min-height:82vh;
  align-items:center;
  position:relative;
  overflow:hidden
}
.chapter:nth-of-type(2) {
  margin-inline:-5vw;
  padding-inline:5vw;
  background:var(--o);
  color:#111;
  border:0
}
.chapter:nth-of-type(2) .num,.chapter:nth-of-type(2) .loop i {
  color:#fff
}
.chapter:nth-of-type(2) .intro,.chapter:nth-of-type(2) .loop small {
  color:#111
}
.chapter:nth-of-type(2) .loop div {
  border-color:#111
}
.chapter h3 {
  position:relative;
  z-index:1
}
.chapter h3:after {
  content:"";
  position:absolute;
  left:-1vw;
  bottom:-12px;
  width:42%;
  height:12px;
  background:var(--o);
  z-index:-1;
  transform:skewX(-24deg)
}
.chapter:nth-of-type(2) h3:after {
  background:#fff
}
.week {
  transform:rotate(-1.5deg);
  box-shadow:14px 14px 0 #242424
}
.chapter:nth-of-type(2) .loop {
  transform:rotate(1deg);
  background:#111;
  color:#fff;
  padding:20px 28px;
  box-shadow:-15px 15px 0 #fff
}
.chapter:nth-of-type(2) .loop small {
  color:#ccc
}
.staff {
  transform:translateX(3vw)
}
.staff span:nth-child(2) {
  transform:translateY(12px)
}
.staff span:nth-child(3) {
  transform:translateY(24px)
}
.perm-top {
  position:relative;
  min-height:100svh
}
.perm-top .photo {
  clip-path:polygon(0 0,100% 0,82% 100%,0 100%)
}
.perm-top .photo:after {
  content:"NO HANDOFF";
  position:absolute;
  left:-1vw;
  bottom:7%;
  font:900 clamp(60px,10vw,160px)/.75 Arial;
  color:#fff;
  letter-spacing:-.08em;
  white-space:nowrap;
  mix-blend-mode:difference
}
.perm-copy {
  margin-left:-8vw;
  position:relative;
  z-index:2;
  background:var(--m);
  padding-left:10vw;
  transform:rotate(-1deg)
}
.journey {
  position:relative;
  overflow:hidden;
  padding-top:8vw
}
.journey:before {
  content:"01  02  03  04";
  position:absolute;
  left:-2vw;
  top:-.18em;
  font:900 15vw/1 Arial;
  color:#00000009;
  white-space:nowrap;
  letter-spacing:-.08em
}
.steps {
  gap:14px;
  transform:rotate(-1deg)
}
.step {
  background:#fff;
  border:2px solid #111!important;
  min-height:390px;
  box-shadow:10px 10px 0 #111
}
.step:nth-child(even) {
  transform:translateY(42px);
  background:var(--o)
}
.step h4 {
  font-size:clamp(34px,3vw,52px)
}
.benefits {
  display:flex;
  overflow:hidden;
  white-space:nowrap;
  background:#111;
  color:#fff;
  border:0
}
.benefit {
  flex:0 0 auto;
  width:auto!important;
  display:flex;
  align-items:center;
  gap:30px;
  padding:24px 5vw;
  border:0
}
.benefit b {
  font-size:clamp(34px,5vw,72px);
  color:var(--o)
}
.benefit p {
  font-size:15px
}
.benefit:after {
  content:"✦";
  color:var(--o);
  font-size:36px
}
.compare {
  position:relative;
  min-height:90svh;
  background:linear-gradient(112deg,#151515 0 49.8%,var(--m) 50%);
  color:#111;
  overflow:hidden
}
.compare>div {
  align-self:center;
  position:relative
}
.compare>div:first-child {
  border:0;
  color:#777;
  transform:translateY(-7vh)
}
.compare>div:last-child {
  transform:translateY(7vh)
}
.compare h3 {
  font-size:clamp(48px,6vw,90px);
  line-height:.95
}
.flow {
  border:0;
  position:relative;
  padding:18px 0 18px 52px
}
.flow b {
  position:absolute;
  left:0;
  font-size:12px
}
.compare>div:last-child .flow {
  font-weight:900;
  font-size:18px
}
.portrait {
  height:100svh
}
.identity {
  align-items:center
}
.identity h2 {
  mix-blend-mode:difference
}
.socials {
  display:flex;
  gap:12px
}
.social-icon {
  width:72px;
  height:72px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--o);
  color:#111;
  transition:.25s;
  box-shadow:7px 7px 0 #fff
}
.social-icon:hover {
  transform:translate(-4px,-4px);
  box-shadow:11px 11px 0 #fff
}
.social-icon svg {
  width:30px;
  height:30px;
  fill:currentColor
}
.insta {
  position:relative;
  overflow:hidden
}
.insta:before {
  content:"INSTAGRAM";
  position:absolute;
  right:-2vw;
  top:0;
  font:900 13vw/.8 Arial;
  color:#ffffff0a;
  letter-spacing:-.08em
}
.grid3 {
  gap:0;
  align-items:end
}
.post {
  transition:.35s
}
.post:nth-child(1) {
  transform:rotate(-3deg) translateX(3%)
}
.post:nth-child(2) {
  transform:translateY(7%);
  z-index:2
}
.post:nth-child(3) {
  transform:rotate(3deg) translateX(-3%)
}
.post:hover {
  z-index:4;
  transform:rotate(0) scale(1.04)
}
.stance {
  position:relative;
  display:block;
  background:var(--o);
  color:#111;
  overflow:hidden
}
.stance:before {
  content:"2021 → 2026";
  position:absolute;
  top:4vw;
  left:-2vw;
  font:900 13vw/.8 Arial;
  color:#0000000b;
  letter-spacing:-.08em;
  white-space:nowrap
}
.stance>div {
  width:76%;
  min-height:100svh;
  position:relative
}
.stance .old {
  background:var(--p);
  clip-path:polygon(0 0,100% 0,88% 100%,0 100%);
  padding-right:13vw
}
.stance .new {
  margin:-18vh 0 0 auto;
  background:var(--o);
  padding-left:14vw;
  box-shadow:-30px -30px 0 #111;
  transform:rotate(1deg)
}
.stance h2 {
  font-size:clamp(58px,7vw,110px);
  line-height:.98
}
.stance ul {
  border:0
}
.stance li {
  border:0;
  position:relative;
  padding:18px 0 18px 44px;
  font-size:clamp(16px,1.5vw,23px)
}
.stance li:before {
  position:absolute;
  left:0
}
.old li:before {
  content:"●";
  color:var(--o);
  font-size:12px;
  top:25px
}
.new li:nth-child(odd) {
  transform:translateX(3vw)
}
.company {
  position:relative;
  overflow:hidden;
  padding-top:12vw
}
.company:before {
  content:"HONOBE";
  position:absolute;
  right:-4vw;
  top:1vw;
  font:900 19vw/.8 Arial;
  color:#ffffff07;
  letter-spacing:-.1em
}
.company-grid {
  grid-template-columns:.8fr 1.2fr;
  align-items:start
}
.company-note {
  position:sticky;
  top:12vh;
  font-size:clamp(50px,6vw,95px)
}
.company dl {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.company dl div {
  display:block;
  min-height:150px;
  padding:22px;
  background:#141414;
  border:0;
  transition:.25s
}
.company dl div:nth-child(3n+2) {
  transform:translateY(28px);
  background:var(--o);
  color:#111
}
.company dl div:nth-child(3n+2) dt {
  color:#111
}
.company dl div:hover {
  transform:translateY(-6px) rotate(-1deg);
  background:var(--m);
  color:#111
}
.company dt {
  font-size:11px;
  letter-spacing:.12em;
  margin-bottom:18px
}
.company dd {
  font-size:16px;
  font-weight:700
}
@media(max-width:760px) {
  .system:before {
    font-size:70vw;
    top:13vh
  }
  .chapter {
    min-height:100svh;
    margin-inline:-20px!important;
    padding:90px 20px!important
  }
  .chapter:nth-of-type(odd) {
    padding-left:9vw!important
  }
  .chapter h3 {
    font-size:15vw;
    line-height:.9;
    margin-bottom:40px
  }
  .chapter .intro {
    font-size:15px;
    max-width:78%
  }
  .week {
    margin:20px 7px 35px;
    box-shadow:9px 9px 0 #242424
  }
  .chapter:nth-of-type(2) .loop {
    margin:0 5px;
    padding:14px 18px;
    box-shadow:-9px 9px 0 #fff
  }
  .details li {
    border:0;
    background:#171717;
    margin:8px 0;
    padding:18px 16px;
    transform:rotate(-1deg)
  }
  .chapter:nth-of-type(2) .details li {
    background:#111
  }
  .staff {
    transform:none;
    gap:4px
  }
  .staff span {
    font-size:15px;
    padding:18px
  }
  .staff span:nth-child(2),.staff span:nth-child(3) {
    transform:none
  }
  .perm-top {
    min-height:100svh;
    display:block
  }
  .perm-top .photo {
    height:58svh;
    clip-path:polygon(0 0,100% 0,100% 88%,0 100%)
  }
  .perm-top .photo:after {
    font-size:22vw;
    bottom:3%
  }
  .perm-copy {
    margin:-6vh 0 0 8vw;
    padding:55px 20px 80px;
    transform:rotate(-2deg)
  }
  .perm-copy .lead {
    font-size:13vw
  }
  .journey-title {
    font-size:11px
  }
  .steps {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:30px 18vw 65px 4px;
    gap:18px;
    transform:none
  }
  .step {
    flex:0 0 82vw;
    scroll-snap-align:center;
    min-height:470px;
    padding:35px 28px
  }
  .step:nth-child(even) {
    transform:translateY(30px)
  }
  .benefits {
    overflow-x:auto;
    scroll-snap-type:x mandatory
  }
  .benefit {
    flex:0 0 86vw;
    display:block;
    white-space:normal;
    scroll-snap-align:center;
    padding:48px 25px
  }
  .benefit b {
    font-size:11vw
  }
  .compare {
    display:block;
    min-height:0;
    background:linear-gradient(168deg,#151515 0 49.8%,var(--m) 50%)
  }
  .compare>div {
    min-height:75svh;
    padding:18vh 20px 70px!important
  }
  .compare>div:first-child,.compare>div:last-child {
    transform:none
  }
  .compare h3 {
    font-size:14vw
  }
  .portrait {
    height:100svh
  }
  .portrait img {
    object-position:60% center
  }
  .identity {
    bottom:35px
  }
  .identity h2 {
    font-size:17vw
  }
  .socials {
    margin-top:30px
  }
  .social-icon {
    width:60px;
    height:60px;
    box-shadow:5px 5px 0 #fff
  }
  .insta {
    padding-top:90px
  }
  .insta h3 {
    font-size:12vw;
    line-height:1
  }
  .grid3 {
    padding:45px 0
  }
  .post:nth-child(1) {
    transform:rotate(-5deg) translateX(8%)
  }
  .post:nth-child(2) {
    transform:translateY(12%)
  }
  .post:nth-child(3) {
    transform:rotate(5deg) translateX(-8%)
  }
  .stance>div {
    width:94%;
    padding:15vh 20px 18vh;
    min-height:100svh
  }
  .stance .old {
    padding-right:12vw;
    clip-path:polygon(0 0,100% 0,85% 100%,0 100%)
  }
  .stance .new {
    margin:-12vh 0 0 auto;
    padding-left:12vw;
    box-shadow:-15px -15px 0 #111
  }
  .stance h2 {
    font-size:14vw
  }
  .stance li {
    font-size:16px;
    padding:15px 0 15px 32px
  }
  .company {
    padding-top:120px
  }
  .company-grid {
    display:block
  }
  .company-note {
    position:relative;
    top:auto;
    font-size:14vw;
    margin-bottom:90px
  }
  .company dl {
    grid-template-columns:1fr 1fr;
    gap:6px
  }
  .company dl div {
    min-height:165px;
    padding:16px
  }
  .company dl div:nth-child(3n+2) {
    transform:translateY(14px)
  }
  .company dt {
    font-size:10px
  }
  .company dd {
    font-size:14px;
    line-height:1.55
  }
  footer {
    margin-top:110px
  }
}
/* v8 — straight editorial system: KVの強さを保ち、読める構図へ */
.system {
  padding:0;
  background:#080808
}
.system:before {
  display:none
}
.system>.head {
  padding:110px 5vw 80px;
  margin:0;
  min-height:72vh;
  align-content:end;
  background:#080808;
  position:relative;
  overflow:hidden
}
.system>.head:before {
  content:"365";
  position:absolute;
  right:-.05em;
  top:-.12em;
  color:#ffffff08;
  font:900 clamp(190px,32vw,520px)/.8 Arial;
  letter-spacing:-.1em
}
.system>.head>* {
  position:relative;
  z-index:1
}
.chapter {
  margin:0!important;
  padding:95px 5vw!important;
  min-height:760px;
  display:grid;
  grid-template-columns:90px minmax(300px,.85fr) 1.15fr;
  gap:5vw;
  align-items:center;
  border:0;
  overflow:hidden;
  position:relative
}
.chapter:after {
  position:absolute;
  right:2vw;
  bottom:-.16em;
  color:#ffffff0b;
  font:900 clamp(180px,25vw,390px)/1 Arial;
  letter-spacing:-.1em
}
.chapter:nth-of-type(1):after {
  content:"365"
}
.chapter:nth-of-type(2):after {
  content:"PM";
  color:#0000000b
}
.chapter:nth-of-type(3):after {
  content:"03"
}
.chapter:nth-of-type(odd) {
  background:#111
}
.chapter:nth-of-type(2) {
  background:var(--o);
  color:#111
}
.chapter>* {
  position:relative;
  z-index:1
}
.chapter h3 {
  font-size:clamp(48px,5.6vw,82px);
  line-height:1;
  max-width:7em
}
.chapter h3:after {
  display:none
}
.chapter .intro {
  max-width:31em;
  font-size:15px
}
.week,.chapter:nth-of-type(2) .loop,.details li,.staff,.staff span {
  transform:none!important;
  box-shadow:none!important
}
.week {
  margin-bottom:32px;
  background:#0c0c0c
}
.chapter:nth-of-type(2) .loop {
  margin:0;
  background:#111;
  color:#fff;
  padding:18px 28px
}
.chapter:nth-of-type(2) .loop small {
  color:#ccc
}
.details li {
  background:transparent!important;
  margin:0!important;
  border-top:1px solid #444!important
}
.chapter:nth-of-type(2) .details li {
  border-color:#111!important
}
.staff {
  transform:none
}
.staff span {
  background:#181818
}
.perm-top {
  min-height:780px;
  display:grid;
  grid-template-columns:50% 50%;
  background:var(--m)
}
.perm-top .photo {
  height:auto;
  clip-path:none
}
.perm-top .photo:after {
  content:"NO HANDOFF";
  left:3vw;
  bottom:3vw;
  font-size:clamp(52px,7vw,110px);
  line-height:.78
}
.perm-copy {
  margin:0;
  padding:9vw 7vw;
  transform:none;
  background:var(--m)
}
.perm-copy .lead {
  font-size:clamp(52px,6vw,88px)
}
.journey {
  padding:90px 5vw 110px
}
.journey:before {
  top:18px;
  font-size:12vw
}
.journey-title {
  position:relative;
  z-index:1
}
.steps {
  gap:0;
  transform:none;
  margin-top:45px;
  border-top:2px solid #111;
  border-bottom:2px solid #111
}
.step {
  min-height:360px;
  padding:42px 28px;
  background:transparent!important;
  border:0!important;
  border-right:1px solid #aaa!important;
  box-shadow:none!important;
  transform:none!important
}
.step:last-child {
  border-right:0!important
}
.step h4 {
  font-size:clamp(32px,3vw,48px);
  margin:70px 0 20px
}
.benefits {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  white-space:normal;
  overflow:visible
}
.benefit {
  display:block;
  padding:52px 2.5vw;
  border-right:1px solid #444
}
.benefit:last-child {
  border:0
}
.benefit b {
  font-size:clamp(28px,3.5vw,54px);
  line-height:1
}
.benefit p {
  font-size:13px
}
.benefit:after {
  display:none
}
.compare {
  min-height:820px;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:none
}
.compare>div {
  min-width:0;
  padding:110px 5vw!important;
  transform:none!important;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden
}
.compare>div:first-child {
  background:#151515;
  color:#777;
  border:0
}
.compare>div:last-child {
  background:var(--m);
  color:#111
}
.compare h3 {
  font-size:clamp(42px,5vw,72px);
  line-height:1;
  margin:24px 0 60px;
  max-width:8em
}
.compare .flow {
  padding:17px 0 17px 48px;
  font-size:14px!important;
  font-weight:700;
  max-width:480px;
  border-top:1px solid currentColor
}
.portrait {
  height:min(100svh,940px);
  min-height:680px
}
.social-icon {
  transform:none;
  box-shadow:none;
  border:2px solid #fff
}
.social-icon:hover {
  transform:translateY(-5px);
  box-shadow:none
}
.grid3 {
  gap:10px
}
.post,.post:nth-child(n) {
  transform:none
}
.post:hover {
  transform:none
}
.post:hover img {
  transform:scale(1.05)
}
.stance {
  display:grid;
  grid-template-columns:1fr 1fr;
  background:none
}
.stance:before {
  z-index:2;
  pointer-events:none;
  top:30px;
  font-size:10vw
}
.stance>div {
  width:auto;
  min-height:850px;
  margin:0!important;
  padding:120px 5vw!important;
  clip-path:none!important;
  transform:none!important;
  box-shadow:none!important;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.stance .old {
  background:var(--p)
}
.stance .new {
  background:var(--o)
}
.stance h2 {
  font-size:clamp(46px,5vw,74px);
  line-height:1.02;
  margin:24px 0 55px
}
.stance li,.stance .new li:nth-child(odd) {
  transform:none
}
.company {
  padding:120px 5vw 45px
}
.company:before {
  top:30px;
  font-size:17vw
}
.company-grid {
  display:grid;
  grid-template-columns:minmax(280px,.7fr) minmax(460px,1.3fr);
  gap:8vw;
  margin-top:70px;
  align-items:start
}
.company-note {
  position:sticky;
  top:100px;
  font-size:clamp(42px,5.2vw,76px);
  line-height:1.08
}
.company dl {
  display:block;
  border-top:1px solid #555
}
.company dl div,.company dl div:nth-child(3n+2) {
  display:grid;
  grid-template-columns:155px minmax(0,1fr);
  min-height:0;
  padding:24px 0;
  background:transparent;
  color:#fff;
  border:0;
  border-bottom:1px solid #555;
  transform:none
}
.company dl div:hover {
  transform:none;
  background:transparent;
  color:#fff
}
.company dt,.company dl div:nth-child(3n+2) dt {
  margin:0;
  color:#888;
  font-size:11px;
  letter-spacing:.12em
}
.company dd {
  font-size:15px;
  line-height:1.75;
  font-weight:700;
  overflow-wrap:anywhere
}
@media(max-width:760px) {
  .system>.head {
    padding:90px 20px 65px;
    min-height:560px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end
  }
  .system>.head .lead {
    font-size:46px;
    line-height:1
  }
  .chapter,.chapter:nth-of-type(odd),.chapter:nth-of-type(2) {
    min-height:0;
    margin:0!important;
    padding:88px 20px!important;
    display:block
  }
  .chapter:after {
    right:-.04em;
    bottom:-.12em;
    font-size:52vw
  }
  .chapter .num {
    margin-bottom:24px
  }
  .chapter h3 {
    font-size:clamp(43px,12vw,54px);
    line-height:.98;
    margin:0 0 28px;
    max-width:8em
  }
  .chapter .intro {
    max-width:24em;
    margin:0 0 40px;
    font-size:14px
  }
  .week {
    margin:0 0 32px;
    box-shadow:none
  }
  .details li {
    display:grid;
    grid-template-columns:82px 1fr;
    padding:16px 0!important;
    font-size:13px
  }
  .staff {
    display:grid;
    grid-template-columns:1fr;
    gap:5px
  }
  .chapter:nth-of-type(2) .loop {
    margin:0;
    padding:12px 16px
  }
  .perm-top {
    display:block;
    min-height:0
  }
  .perm-top .photo {
    height:62svh;
    min-height:480px;
    clip-path:none
  }
  .perm-top .photo:after {
    font-size:17vw;
    bottom:20px
  }
  .perm-copy {
    margin:0;
    padding:75px 20px 85px;
    transform:none
  }
  .perm-copy .lead {
    font-size:clamp(44px,12vw,54px);
    line-height:1
  }
  .perm-copy .body {
    margin-top:32px
  }
  .journey {
    padding:70px 20px 78px
  }
  .journey:before {
    font-size:24vw;
    top:30px
  }
  .journey-title {
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    font-size:11px
  }
  .steps {
    display:block;
    margin-top:38px;
    padding:0;
    border-top:2px solid #111;
    border-bottom:0;
    overflow:visible
  }
  .step {
    min-height:0;
    padding:34px 0 38px;
    border-right:0!important;
    border-bottom:1px solid #999!important
  }
  .step h4 {
    font-size:36px;
    margin:22px 0 12px
  }
  .step p {
    max-width:30em;
    margin-bottom:0
  }
  .benefits {
    display:block;
    overflow:visible
  }
  .benefit {
    padding:38px 20px;
    border-right:0;
    border-bottom:1px solid #444
  }
  .benefit b {
    font-size:38px
  }
  .compare {
    display:block;
    min-height:0
  }
  .compare>div {
    min-height:620px;
    padding:86px 20px!important
  }
  .compare h3 {
    font-size:clamp(44px,12vw,56px);
    line-height:.98;
    margin:20px 0 48px;
    max-width:7em
  }
  .compare .flow {
    padding:15px 0 15px 42px
  }
  .portrait {
    height:92svh;
    min-height:660px
  }
  .identity h2 {
    font-size:clamp(54px,15vw,70px)
  }
  .social-icon {
    box-shadow:none
  }
  .insta {
    padding:78px 20px
  }
  .insta h3 {
    font-size:44px;
    line-height:1.05
  }
  .grid3 {
    padding:30px 0 0;
    gap:5px
  }
  .post:nth-child(n) {
    transform:none
  }
  .stance {
    display:block
  }
  .stance:before {
    top:25px;
    font-size:19vw
  }
  .stance>div {
    width:100%;
    min-height:0;
    padding:100px 20px!important
  }
  .stance h2 {
    font-size:clamp(44px,12vw,54px);
    margin:20px 0 40px
  }
  .stance li {
    font-size:15px;
    line-height:1.65;
    padding:15px 0 15px 30px
  }
  .company {
    padding:96px 20px 30px
  }
  .company-grid {
    display:block;
    margin-top:55px
  }
  .company-note {
    position:relative;
    top:auto;
    font-size:clamp(42px,12vw,54px);
    margin:0 0 70px
  }
  .company dl {
    display:block
  }
  .company dl div,.company dl div:nth-child(3n+2) {
    display:grid;
    grid-template-columns:92px minmax(0,1fr);
    min-height:0;
    padding:20px 0;
    transform:none
  }
  .company dt {
    font-size:10px
  }
  .company dd {
    font-size:13px;
    line-height:1.75
  }
  footer {
    margin-top:80px
  }
}
/* v9 — mobile density and graphic rhythm */
@media(max-width:760px) {
.journey {
    padding:58px 20px 62px
  }
  .journey:before {
    top:18px;
    color:#0000000b
  }
  .journey-title {
    padding:0 0 18px;
    border-bottom:4px solid #111
  }
  .steps {
    margin:0 -20px;
    border:0
  }
  .step {
    position:relative;
    display:grid;
    grid-template-columns:70px 1fr;
    grid-template-rows:auto auto;
    padding:0!important;
    border:0!important;
    border-bottom:2px solid #111!important;
    background:transparent;
    overflow:hidden
  }
  .step .num {
    grid-row:1/3;
    display:grid;
    place-items:center;
    background:var(--o);
    color:#111;
    font-size:18px
  }
  .step h4 {
    grid-column:2;
    margin:0;
    padding:25px 20px 8px;
    font-size:35px;
    line-height:1
  }
  .step p {
    grid-column:2;
    margin:0;
    padding:0 20px 25px;
    font-size:15px;
    line-height:1.75
  }
  .benefits {
    border-top:0
  }
  .benefit {
    position:relative;
    min-height:0;
    padding:27px 20px 29px 72px;
    border-bottom:1px solid #555;
    overflow:hidden
  }
  .benefit:before {
    content:"✦";
    position:absolute;
    left:20px;
    top:27px;
    color:var(--o);
    font-size:24px
  }
  .benefit b {
    font-size:34px;
    line-height:1.05
  }
  .benefit p {
    font-size:15px;
    line-height:1.6;
    margin:9px 0 0;
    color:#ccc
  }
  .compare>div {
    min-height:0;
    padding:68px 20px 62px!important;
    position:relative
  }
  .compare>div:after {
    position:absolute;
    right:-.05em;
    top:-.08em;
    font:900 40vw/.8 Arial;
    letter-spacing:-.1em;
    opacity:.055
  }
  .compare>div:first-child:after {
    content:"A"
  }
  .compare>div:last-child:after {
    content:"H"
  }
  .compare .label {
    position:relative;
    z-index:1
  }
  .compare h3 {
    position:relative;
    z-index:1;
    font-size:44px;
    line-height:.98;
    margin:15px 0 35px;
    max-width:7.5em
  }
  .compare .flow {
    position:relative;
    z-index:1;
    max-width:none;
    padding:15px 0 15px 44px;
    font-size:15px!important
  }
  .compare>div:last-child .flow {
    border-color:#111
  }
  .stance>div {
    display:block;
    padding:72px 20px 58px!important
  }
  .stance:before {
    font-size:18vw;
    top:15px
  }
  .stance .label {
    font-size:12px
  }
  .stance h2 {
    font-size:44px;
    line-height:1;
    margin:16px 0 32px;
    max-width:8em
  }
  .stance ul {
    margin:0;
    border-top:3px solid #111
  }
  .stance li {
    padding:14px 0 14px 30px;
    font-size:15px;
    line-height:1.55;
    border-bottom:1px solid #0005
  }
  .stance li:before {
    top:18px
  }
  .company {
    padding-top:78px
  }
  .company-note {
    font-size:43px;
    line-height:1.04;
    margin-bottom:48px
  }
  .company dl div,.company dl div:nth-child(3n+2) {
    grid-template-columns:88px minmax(0,1fr);
    padding:16px 0
  }
  .company dd {
    font-size:14px
  }
  .perm-copy {
    padding-top:62px;
    padding-bottom:68px
  }
  .perm-copy .lead {
    font-size:45px
  }
  .perm-copy .body {
    font-size:15px;
    line-height:1.8
  }
  .portrait {
    min-height:620px
  }
  .insta {
    padding-top:60px;
    padding-bottom:60px
  }
}
/* v10 — continuous art direction inspired by editorial motion studios */
.system>.head:after {
  content:"SCROLL / READ / THINK";
  position:absolute;
  left:5vw;
  bottom:32px;
  color:var(--o);
  font:900 12px/1 monospace;
  letter-spacing:.18em
}
.chapter {
  transition:background-color .55s,color .55s
}
.chapter .num {
  writing-mode:vertical-rl;
  letter-spacing:.15em;
  align-self:start
}
.chapter:nth-of-type(2) .num {
  color:#111
}
.chapter h3 {
  transition:transform .12s linear
}
.chapter .details li,.chapter .loop>div {
  transition:padding-left .35s,background-color .35s
}
.chapter .details li:hover,.chapter .loop>div:hover {
  padding-left:14px;
  background:#ffffff0b!important
}
.perm-top {
  border-top:14px solid var(--o);
  border-bottom:14px solid #111
}
.perm-copy {
  position:relative;
  overflow:hidden
}
.perm-copy:after {
  content:"PM";
  position:absolute;
  right:-.08em;
  bottom:-.18em;
  color:#0000000a;
  font:900 clamp(180px,24vw,380px)/1 Arial;
  letter-spacing:-.1em
}
.perm-copy>* {
  position:relative;
  z-index:1
}
.journey-title:before {
  content:"";
  display:block;
  width:64px;
  height:10px;
  background:var(--o);
  margin-bottom:20px
}
.step {
  position:relative;
  overflow:hidden;
  transition:color .35s,background-color .35s!important
}
.step:after {
  content:"";
  position:absolute;
  right:-.04em;
  bottom:-.2em;
  color:#00000009;
  font:900 150px/1 Arial
}
.step:hover {
  background:var(--o)!important
}
.benefit {
  position:relative;
  overflow:hidden
}
.benefit:before {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:5px;
  background:var(--o);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .6s
}
.benefit:hover:before,.benefit.in:before {
  transform:scaleX(1)
}
.compare {
  border-top:14px solid var(--o);
  border-bottom:14px solid var(--o)
}
.compare>div {
  transition:background-color .45s
}
.compare>div:first-child:before,.compare>div:last-child:before {
  position:absolute;
  right:3vw;
  top:40px;
  font:900 12px/1 monospace;
  letter-spacing:.18em
}
.compare>div:first-child:before {
  content:"HAND OFF / RESET / REPEAT"
}
.compare>div:last-child:before {
  content:"LISTEN / THINK / IMPROVE"
}
.flow {
  transition:padding-left .3s,color .3s
}
.flow:hover {
  padding-left:60px;
  color:var(--o)
}
.compare>div:last-child .flow:hover {
  color:#111;
  background:#ffffff66
}
.portrait {
  border-bottom:14px solid var(--o)
}
.identity {
  z-index:3
}
.identity:before {
  content:"04";
  position:absolute;
  right:0;
  bottom:90px;
  color:#ffffff16;
  font:900 clamp(160px,28vw,420px)/.7 Arial;
  letter-spacing:-.12em
}
.insta {
  border-bottom:14px solid var(--o)
}
.post:after {
  transition:background-color .3s,color .3s
}
.post:hover:after {
  background:#111;
  color:#fff
}
.stance {
  border-bottom:14px solid #111
}
.stance>div {
  position:relative;
  overflow:hidden
}
.stance .old:after,.stance .new:after {
  position:absolute;
  right:-.08em;
  bottom:-.2em;
  font:900 clamp(180px,25vw,390px)/1 Arial;
  letter-spacing:-.12em;
  opacity:.06
}
.stance .old:after {
  content:"21"
}
.stance .new:after {
  content:"26"
}
.stance>div>* {
  position:relative;
  z-index:1
}
.stance li {
  transition:padding-left .3s
}
.stance li:hover {
  padding-left:54px
}
.company {
  border-top:14px solid var(--o)
}
.company dl div {
  transition:padding-left .3s,border-color .3s
}
.company dl div:hover {
  padding-left:14px;
  border-color:var(--o)
}
.kinetic {
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s,transform .7s
}
.kinetic.in {
  opacity:1;
  transform:none
}
@media(max-width:760px) {
  .system>.head:after {
    left:20px;
    bottom:22px
  }
  .chapter .num {
    writing-mode:horizontal-tb
  }
  .chapter .details li:hover,.chapter .loop>div:hover {
    padding-left:0
  }
  .perm-top {
    border-width:9px
  }
  .journey-title:before {
    width:48px;
    height:7px;
    margin-bottom:14px
  }
  .step:after {
    font-size:105px
  }
  .step:hover {
    background:transparent!important
  }
  .benefit:before {
    height:4px
  }
  .compare {
    border-width:9px
  }
  .compare>div:first-child:before,.compare>div:last-child:before {
    top:28px;
    right:20px;
    font-size:10px;
    max-width:170px;
    text-align:right;
    line-height:1.4
  }
  .flow:hover {
    padding-left:44px
  }
  .portrait,.insta,.stance {
    border-bottom-width:9px
  }
  .identity:before {
    bottom:120px;
    font-size:44vw
  }
  .stance .old:after,.stance .new:after {
    font-size:46vw
  }
  .stance li:hover {
    padding-left:30px
  }
  .company {
    border-top-width:9px
  }
  .company dl div:hover {
    padding-left:0
  }
}
/* v11 — persistent motion layer */
.scroll-progress {
  position:fixed;
  z-index:30;
  left:0;
  top:0;
  width:5px;
  height:100svh;
  background:#ffffff12;
  pointer-events:none
}
.scroll-progress i {
  display:block;
  width:100%;
  height:var(--progress,0%);
  background:var(--o);
  box-shadow:0 0 18px #f26830;
  transition:height .08s linear
}
.photo.wipe img,.portrait.wipe img {
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.05s cubic-bezier(.22,.8,.22,1),transform .12s linear
}
.photo.wipe.in img,.portrait.wipe.in img {
  clip-path:inset(0)
}
.loop>div {
  position:relative;
  overflow:hidden
}
.loop>div:after {
  content:"";
  position:absolute;
  inset:0;
  background:#ffffff14;
  transform:translateX(-101%);
  animation:scan 8s ease-in-out infinite
}
.loop>div:nth-child(2):after {
  animation-delay:1.5s
}
.loop>div:nth-child(3):after {
  animation-delay:3s
}
.loop>div:nth-child(4):after {
  animation-delay:4.5s
}
@keyframes scan {
  0%,12% {
    transform:translateX(-101%)
  }
  22%,30% {
    transform:translateX(0)
  }
  42%,100% {
    transform:translateX(101%)
  }
}
.week .hot {
  animation:hotPulse 2.6s ease-in-out infinite
}
.week .hot:nth-last-child(2) {
  animation-delay:.35s
}
.week .hot:nth-last-child(1) {
  animation-delay:.7s
}
@keyframes hotPulse {
  0%,100% {
    background:var(--o);
    color:#111
  }
  50% {
    background:#fff;
    color:#111
  }
}
.perm-copy:after,.stance .old:after,.stance .new:after,.compare>div:after,.identity:before {
  transform:translateX(var(--drift,0px));
  transition:transform .08s linear
}
.social-icon {
  animation:floatIcon 3.5s ease-in-out infinite
}
.social-icon:nth-child(2) {
  animation-delay:.6s
}
@keyframes floatIcon {
  0%,100% {
    translate:0 0
  }
  50% {
    translate:0 -7px
  }
}
.post img {
  animation:imageBreath 9s ease-in-out infinite
}
.post:nth-child(2) img {
  animation-delay:-3s
}
.post:nth-child(3) img {
  animation-delay:-6s
}
@keyframes imageBreath {
  0%,100% {
    scale:1
  }
  50% {
    scale:1.045
  }
}
.stance li:before {
  transition:transform .3s
}
.stance li.in:before {
  animation:arrowNudge 1.8s ease-in-out infinite
}
@keyframes arrowNudge {
  50% {
    transform:translateX(7px)
  }
}
@media(max-width:760px) {
  .scroll-progress {
    width:4px
  }
  .photo.wipe img,.portrait.wipe img {
    transition-duration:.8s
  }
  .social-icon {
    animation-duration:3s
  }
}
@media(prefers-reduced-motion:reduce) {
  .reveal,.kinetic {
    opacity:1;
    transform:none
  }
  .slide {
    animation:none
  }
  .slide:first-child {
    opacity:1
  }
  .bar span,.ticker span,.loop>div:after,.week .hot,.social-icon,.post img,.stance li.in:before {
    animation:none
  }
  .photo.wipe img,.portrait.wipe img {
    clip-path:inset(0);
    transition:none
  }
  .scroll-progress {
    display:none
  }
}
/* Requested cleanup: retain one KV image, restore the HONOBE orange, and fit comparison panels to their content. */
:root {
  --m:#f26830
}
.hero .slide {
  opacity:1;
  animation:none
}
.hero .slide:nth-child(n+2) {
  display:none
}
.compare {
  min-height:0
}
.compare>div {
  padding-top:72px!important;
  padding-bottom:72px!important
}
@media(max-width:760px) {
  .compare>div {
    padding-top:58px!important;
    padding-bottom:54px!important
  }
  header {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding:18px 20px 0
  }
  header nav {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    width:100%;
    gap:0;
    border-top:1px solid #ffffff66;
    border-bottom:1px solid #ffffff66
  }
  header nav a,header nav a:first-child {
    display:block;
    padding:9px 1px;
    border:0;
    border-right:1px solid #ffffff40;
    background:transparent;
    color:#fff;
    text-align:center;
    font-size:8px;
    line-height:1;
    letter-spacing:.04em;
    white-space:nowrap
  }
  header nav a:last-child {
    border-right:0
  }
}
header {
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:100!important;
  padding:22px 38px!important;
  align-items:center!important;
  background:linear-gradient(180deg,rgba(9,9,9,.86),rgba(9,9,9,.34))!important;
  border-bottom:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px)
}
header .logo {
  width:190px!important;
  flex:0 0 auto
}
header nav {
  align-items:center
}
.pickup-link {
  position:relative;
  display:grid;
  grid-template-columns:120px 150px 1fr 64px;
  align-items:center;
  min-height:96px;
  padding:0 5vw;
  background:var(--o);
  color:#111;
  overflow:hidden;
  border-bottom:1px solid #111;
  font-weight:900
}
.pickup-link:before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 0 42%,#fff3 48%,transparent 54%);
  transform:translateX(-100%);
  animation:pickupScan 5s ease-in-out infinite
}
.pickup-link>* {
  position:relative;
  z-index:1
}
.pickup-tag {
  font:900 11px/1 sans-serif;
  letter-spacing:.18em
}
.pickup-date {
  font:800 13px/1 monospace
}
.pickup-title {
  font-size:clamp(18px,2vw,30px);
  letter-spacing:-.03em
}
.pickup-arrow {
  font-size:30px;
  text-align:right;
  transition:transform .3s
}
.pickup-link:hover .pickup-arrow {
  transform:translateX(9px)
}
@keyframes pickupScan {
  0%,62% {
    transform:translateX(-100%)
  }
  86%,100% {
    transform:translateX(100%)
  }
}
.newsroom {
  position:relative;
  overflow:hidden;
  padding:9vw 5vw 10vw;
  background:#090909;
  color:#fff;
  border-top:14px solid var(--o);
  border-bottom:14px solid var(--o)
}
.newsroom:before {
  content:"NEWS";
  position:absolute;
  left:-.04em;
  top:-.2em;
  color:#ffffff08;
  font:900 clamp(180px,28vw,440px)/1 Arial;
  letter-spacing:-.11em
}
.news-stage {
  position:relative;
  display:grid;
  grid-template-columns:minmax(260px,.68fr) 1.32fr;
  gap:7vw;
  align-items:start
}
.news-intro {
  position:sticky;
  top:150px
}
.news-intro h2 {
  margin:24px 0 28px;
  font-size:clamp(58px,8vw,126px);
  line-height:.82;
  letter-spacing:-.08em
}
.news-intro p {
  max-width:300px;
  color:#aaa;
  font-size:14px;
  line-height:1.8
}
.news-list {
  padding-top:28px
}
.news-item {
  position:relative;
  display:grid;
  grid-template-columns:38px 150px 1fr 45px;
  gap:22px;
  align-items:center;
  min-height:126px;
  padding:26px 24px;
  border-top:1px solid #555;
  transition:background-color .35s,color .35s,transform .35s
}
.news-item:before {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:5px;
  background:var(--o);
  transition:width .55s
}
.news-item:hover {
  background:#151515;
  transform:translateX(-10px)
}
.news-item:hover:before {
  width:100%
}
.news-index {
  color:var(--o);
  font:900 12px/1 monospace
}
.news-date {
  font:800 12px/1.5 monospace;
  letter-spacing:.08em
}
.news-title {
  font-size:clamp(17px,1.7vw,26px);
  font-weight:900;
  line-height:1.45;
  letter-spacing:-.03em
}
.news-arrow {
  font-size:25px;
  text-align:right
}
.news-item.latest {
  margin:0 0 28px -4vw;
  background:var(--o);
  color:#111;
  border:0;
  box-shadow:14px 14px 0 #fff;
  transform:none
}
.news-item.latest:before {
  background:#fff
}
.news-item.latest .news-index {
  color:#111
}
.news-item.latest .news-index:after {
  content:"PICK UP";
  display:block;
  margin-top:10px;
  font:900 9px/1 sans-serif;
  letter-spacing:.12em
}
.news-item.latest:hover {
  transform:translate(-8px,-8px);
  box-shadow:22px 22px 0 #fff
}
@media(max-width:760px) {
  header {
    padding:9px 14px 8px!important;
    gap:7px!important;
    background:rgba(9,9,9,.88)!important
  }
  header .logo {
    width:118px!important
  }
  header nav {
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    width:100%!important;
    gap:0!important;
    border-top:1px solid rgba(255,255,255,.28)!important;
    border-bottom:0!important
  }
  header nav a,header nav a:first-child {
    display:block!important;
    padding:7px 1px!important;
    border:0!important;
    border-right:1px solid rgba(255,255,255,.2)!important;
    text-align:center!important;
    font-size:8px!important;
    line-height:1!important;
    letter-spacing:.025em!important;
    white-space:nowrap!important
  }
  header nav a:last-child {
    border-right:0!important
  }
  .pickup-link {
    grid-template-columns:72px 1fr 26px;
    gap:9px;
    min-height:82px;
    padding:15px 20px
  }
  .pickup-tag {
    font-size:9px
  }
  .pickup-date {
    display:none
  }
  .pickup-title {
    font-size:16px;
    line-height:1.35
  }
  .pickup-arrow {
    font-size:21px
  }
  .newsroom {
    padding:100px 20px 90px;
    border-width:9px
  }
  .newsroom:before {
    top:0;
    font-size:45vw
  }
  .news-stage {
    display:block
  }
  .news-intro {
    position:relative;
    top:auto;
    margin-bottom:64px
  }
  .news-intro h2 {
    font-size:24vw;
    margin:18px 0
  }
  .news-intro p {
    font-size:13px
  }
  .news-list {
    padding:0
  }
  .news-item,.news-item.latest {
    grid-template-columns:30px 1fr 28px;
    gap:10px;
    min-height:112px;
    margin:0;
    padding:24px 10px;
    box-shadow:none
  }
  .news-date {
    grid-column:2;
    font-size:10px
  }
  .news-title {
    grid-column:2;
    font-size:18px
  }
  .news-index {
    grid-row:1 / span 2;
    align-self:start;
    margin-top:3px
  }
  .news-arrow {
    grid-column:3;
    grid-row:1 / span 2;
    align-self:center
  }
  .news-item.latest {
    padding:28px 16px;
    margin-bottom:22px;
    box-shadow:8px 8px 0 #fff
  }
  .news-item.latest:hover {
    transform:none;
    box-shadow:8px 8px 0 #fff
  }
}
@media(prefers-reduced-motion:reduce) {
  .pickup-link:before {
    animation:none
  }
}
@media(max-width:760px) {
  header {
    background:linear-gradient(180deg,rgba(9,9,9,.86),rgba(9,9,9,.34))!important
  }
}
.insta .instagram-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.insta .instagram-label svg {
  width: 24px;
  height: 24px;
  fill: var(--o);
  flex: none;
}