:root{
  --paper:#f5f6f7;
  --ink:#13181b;
  --muted:#69747d;
  --line:#cdd3d8;
  --gutter:6.3vw;
  --back-x:0px;
  --back-y:0px;
  --front-x:0px;
  --front-y:0px;
  font-family:Arial,"Yu Gothic","Meiryo",sans-serif;
  color:var(--ink);
  background:var(--paper)
}
*{
  box-sizing:border-box
}
body{
  margin:0
}
a{
  color:inherit;
  text-decoration:none
}
button{
  font:inherit;
  color:inherit;
  cursor:pointer
}
button,a{
  -webkit-tap-highlight-color:transparent
}
button:focus-visible,a:focus-visible{
  outline:3px solid #526e83;
  outline-offset:6px
}
button{
  background:none;
  border:0
}
img{
  display:block;
  max-width:100%
}
[hidden]{
  display:none!important
}
.skip-link{
  position:fixed;
  left:1rem;
  top:-100px;
  z-index:100;
  background:white;
  padding:1rem
}
.skip-link:focus{
  top:1rem
}
.hero{
  position:relative;
  isolation:isolate;
  overflow:clip;
  background:radial-gradient(ellipse at 15% 25%,white 0,transparent 55%),linear-gradient(125deg,#e4e8eb,#fff 44%,#d3d9df);
  height:min(850px,60vw);
  min-height:650px
}
.header{
  height:120px;
  position:relative;
  z-index:20;
  display:flex;
  align-items:center;
  gap:34px;
  padding:20px var(--gutter)
}
.brand{
  width:57px;
  flex-shrink:0;
  align-self:flex-start;
  position:relative
}
.brand-art{
  display:block;
  position:relative;
  transform-origin:top left
}
.brand img{
  width:100%;
  height:auto
}
.logo-shine{
  position:absolute;
  inset:0;
  pointer-events:none;
  mask:url('assets/LEGIT_JPN_black_transparent.png') center/contain no-repeat;
  background:linear-gradient(110deg,transparent 39%,#d9e2e9 48%,white 50%,transparent 58%);
  background-size:400% 100%;
  background-position:100% 0;
  opacity:0
}
.desktop-nav{
  display:flex;
  gap:32px;
  margin-left:auto
}
.desktop-nav a,.contact{
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em
}
.contact{
  border:1px solid #4d5459;
  padding:14px 22px;
  display:flex;
  align-items:center;
  gap:35px;
  background:#ffffff75
}
.contact span{
  font-size:21px;
  font-weight:400
}
.menu-toggle{
  width:44px;
  height:44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  padding:9px
}
.menu-toggle span{
  height:2px;
  width:100%;
  background:var(--ink);
  transition:transform .2s
}
.menu-toggle[aria-expanded=true] span:first-child{
  transform:translateY(4.5px) rotate(45deg)
}
.menu-toggle[aria-expanded=true] span:last-child{
  transform:translateY(-4.5px) rotate(-45deg)
}
.menu{
  position:absolute;
  right:var(--gutter);
  top:105px;
  width:min(370px,88vw);
  padding:25px;
  background:#f8fafbfd;
  border:1px solid var(--line);
  box-shadow:0 15px 40px #28343f20
}
.menu a{
  display:flex;
  justify-content:space-between;
  padding:15px 0;
  border-bottom:1px solid var(--line);
  font-size:16px
}
.menu p{
  font-size:11px;
  color:var(--muted);
  line-height:1.8
}
.hero-main{
  position:absolute;
  inset:0
}
.hero-copy{
  position:absolute;
  z-index:5;
  left:var(--gutter);
  top:25%;
  pointer-events:none
}
.eyebrow{
  font-size:10px;
  letter-spacing:.08em;
  color:var(--muted)
}
.hero-copy .eyebrow{
  display:none
}
h1{
  font-size:clamp(94px,10.9vw,170px);
  line-height:.83;
  letter-spacing:-.075em;
  font-weight:600;
  margin:0 0 27px -7px
}
.tagline{
  font-size:clamp(22px,2.2vw,34px);
  font-weight:700;
  line-height:1.42;
  letter-spacing:.025em;
  margin:0
}
.english{
  font-size:9px;
  line-height:1.6;
  letter-spacing:.08em;
  color:#626c74;
  margin-top:18px
}
.businesses{
  position:absolute;
  inset:0 0 0 21%;
  display:flex;
  gap:3px;
  transform:skewX(-16deg);
  transform-origin:bottom left;
  width:86%
}
.business{
  position:relative;
  flex:1;
  min-width:0;
  overflow:hidden;
  background:#171d22;
  border-left:1px solid #ffffffb0;
  isolation:isolate
}
.photo{
  position:absolute;
  inset:0 -110px;
  transform:skewX(16deg);
  background:#414c55
}
.photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center
}
.photo:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#fff6 0,transparent 25%,#060c1260 66%,#05090de0 100%)
}
.agent .photo img{
  object-position:54% center
}
.event .photo img{
  object-position:46% center
}
.security .photo img{
  object-position:62% center
}
.business-label{
  position:absolute;
  bottom:14%;
  left:16%;
  right:9%;
  color:white;
  transform:skewX(16deg);
  text-shadow:0 1px 8px #0007
}
.number{
  font-size:12px
}
.business h2{
  font-size:clamp(15px,1.5vw,23px);
  font-weight:500;
  line-height:1.1;
  margin:6px 0
}
.business p{
  font-size:clamp(12px,1.12vw,16px);
  font-weight:600;
  line-height:1.5;
  margin:7px 0;
  letter-spacing:.02em
}
.arrow{
  display:block;
  text-align:right;
  font-size:24px;
  font-weight:300
}
.business:hover .arrow{
  color:#c9dcea
}
.glass{
  position:absolute;
  pointer-events:none;
  z-index:6
}
.glass img{
  width:100%;
  height:100%;
  object-fit:fill
}
.glass-back{
  width:68%;
  height:100%;
  top:-20%;
  left:-18%;
  z-index:1;
  transform:translate(var(--back-x),var(--back-y));
  opacity:.9
}
.glass-front{
  width:125%;
  height:57%;
  left:-14%;
  bottom:-13%;
  transform:translate(var(--front-x),var(--front-y));
  opacity:.82
}
.glass-edge{
  width:85%;
  height:48%;
  right:-14%;
  bottom:-18%;
  transform:translate(var(--front-x),var(--front-y));
  opacity:.45
}
.scroll-link{
  position:absolute;
  bottom:6%;
  left:var(--gutter);
  z-index:8;
  display:flex;
  align-items:center;
  gap:20px
}
.scroll-link>span:first-child{
  display:none
}
.circle{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px solid #78848c;
  border-radius:50%;
  font-size:28px;
  background:#f8fafb66
}
.preview-note{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8vw;
  padding:48px var(--gutter) 60px;
  background:linear-gradient(130deg,white,#e9edef);
  border-top:1px solid #fff
}
.preview-note h2{
  font-size:clamp(24px,2.5vw,38px);
  line-height:1.45;
  letter-spacing:.03em;
  margin:24px 0 0
}
.preview-note>div>p:not(.eyebrow){
  font-size:12px;
  line-height:1.9;
  color:#59646d;
  max-width:520px
}
.replay{
  border:1px solid #89949d;
  padding:12px 18px;
  font-size:12px;
  margin-top:12px;
  min-height:44px
}
.replay span{
  margin-left:28px
}
.skip-intro{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:50;
  background:#fffE;
  border:1px solid #88929a;
  padding:12px 16px;
  font-size:11px;
  min-height:44px
}
.intro-veil{
  position:absolute;
  inset:0;
  background:#f7f9fa;
  z-index:10;
  pointer-events:none
}
.intro-pane{
  position:absolute;
  width:45%;
  height:50%;
  z-index:11;
  pointer-events:none;
  background: url("assets/G01_back_plane.svg") center / cover, linear-gradient(135deg,transparent 10%,#b6c3cf70 42%,#ffffffdd 48%,#9aaebe55 50%,transparent 76%);
  border:1px solid #b5c3cf44;
  clip-path:polygon(20% 0,100% 14%,76% 100%,0 72%)
}
@media(min-width:1800px){
  .hero{
    max-height:980px
  }
  .businesses{
    width:84%
  }
}
@media(max-width:1000px) and (min-width:901px){
  :root{
    --gutter:4vw
  }
  .header{
    gap:20px
  }
  .desktop-nav{
    gap:18px
  }
  .hero{
    min-height:610px
  }
  .business-label{
    left:10%;
    bottom:12%
  }
  .business h2{
    font-size:15px
  }
  .business p{
    font-size:12px
  }
  .hero-copy{
    top:29%
  }
  h1{
    font-size:105px
  }
  .businesses{
    left:23%;
    width:84%
  }
}
@media(max-width:900px){
  :root{
    --gutter:24px
  }
  .hero{
    height:auto;
    min-height:0;
    background:linear-gradient(135deg,#f1f4f6,#fafbfc 42%,#f5f7f9)
  }
  .header{
    height:92px;
    padding:10px var(--gutter);
    gap:22px;
    border-bottom:1px solid var(--line);
    margin:0 var(--gutter);
    padding-left:0;
    padding-right:0
  }
  .brand{
    width:47px
  }
  .desktop-nav{
    display:none
  }
  .contact{
    margin-left:auto;
    border:0;
    padding:12px 0;
    font-size:12px;
    font-weight:400;
    background:none
  }
  .contact span{
    display:none
  }
  .menu-toggle{
    border-left:1px solid var(--line);
    width:56px;
    padding-left:17px
  }
  .menu{
    right:0;
    top:87px;
    width:calc(100vw - 48px)
  }
  .hero-main{
    position:relative;
    inset:auto;
    padding:22px var(--gutter) 28px
  }
  .hero-copy{
    position:relative;
    left:auto;
    top:auto
  }
  .hero-copy .eyebrow{
    display:block;
    margin:0 0 18px;
    font-size:10px;
    letter-spacing:0
  }
  h1{
    font-size:clamp(64px,16.5vw,95px);
    line-height:.98;
    letter-spacing:-.065em;
    font-weight:600;
    margin:0 0 25px -3px
  }
  .tagline{
    font-size:20px;
    line-height:1.6;
    letter-spacing:.015em
  }
  .english{
    display:none
  }
  .businesses{
    position:relative;
    inset:auto;
    width:auto;
    transform:none;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 12px;
    margin-top:30px
  }
  .business{
    display:flex;
    flex-direction:column;
    min-height:158px;
    border:1px solid #aab4bd;
    clip-path:polygon(4% 0,100% 0,96% 100%,0 100%)
  }
  .photo{
    position:relative;
    inset:auto;
    transform:none;
    height:83px;
    flex-shrink:0
  }
  .photo img{
    object-position:center
  }
  .photo:after{
    background:linear-gradient(transparent,#0b15151a)
  }
  .business-label{
    position:relative;
    bottom:auto;
    left:auto;
    right:auto;
    transform:none;
    padding:10px 11px 17px;
    min-height:82px;
    text-shadow:none
  }
  .number{
    font-size:9px;
    display:inline-block;
    margin-right:6px;
    color:#adb9c1
  }
  .business h2{
    display:inline;
    font-size:9px;
    line-height:1.5;
    letter-spacing:0
  }
  .desktop-break{
    display:none
  }
  .business p{
    font-size:13px;
    line-height:1.5;
    margin:9px 0 0;
    padding-right:8px
  }
  .arrow{
    position:absolute;
    right:12px;
    bottom:9px;
    font-size:20px
  }
  .glass-back{
    width:130%;
    height:400px;
    left:-40%;
    top:-90px
  }
  .glass-front{
    width:160%;
    height:180px;
    bottom:-40px;
    left:-35%;
    opacity:.6
  }
  .glass-edge{
    display:none
  }
  .scroll-link{
    position:relative;
    left:auto;
    bottom:auto;
    display:flex;
    justify-content:space-between;
    margin-top:32px
  }
  .scroll-link>span:first-child{
    display:block;
    font-size:10px;
    color:var(--muted)
  }
  .circle{
    width:38px;
    height:38px;
    font-size:25px
  }
  .preview-note{
    grid-template-columns:1fr;
    gap:20px;
    padding:30px var(--gutter) 40px
  }
  .preview-note h2{
    font-size:25px;
    margin-top:22px
  }
  .preview-note .eyebrow{
    font-size:9px
  }
  .preview-note>div>p:not(.eyebrow){
    font-size:12px
  }
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    scroll-behavior:auto!important;
    transition:none!important
  }
  .glass{
    transform:none!important
  }
}
@media(min-width:901px){
  .businesses{
    left:18%;
    width:74%
  }
  .business-label{
    left:15%;
    right:10%
  }
  .header{
    background:linear-gradient(#f8fafbbf,transparent)
  }
}
.business h2{
  overflow-wrap:anywhere
}
@media(max-width:360px){
  .business-label{
    padding-left:9px;
    padding-right:8px
  }
  .business p{
    font-size:12px;
    padding-right:0
  }
}
@media(min-width:701px) and (max-width:900px){
  .photo{
    height:180px
  }
  .business-label{
    min-height:100px
  }
  .business h2{
    font-size:13px
  }
  .business p{
    font-size:18px
  }
}
@media(max-width:900px){
  h1{
    overflow-wrap:anywhere
  }
}

/* Stage 1 revision: readable photo windows and restrained silver edges. */
:root { --panel-angle: -16deg; --edge-light: #f8fcff; --edge-shadow: #667c8e; }
@media (min-width:901px) {
  .hero { height: min(790px,55vw); min-height:650px; }
  .header { height:108px; gap:30px; padding-top:18px; background:linear-gradient(#f7f9fbe8, #f7f9fb85 65%, transparent); }
  .hero-copy { top:26%; }
  h1 { font-size:clamp(100px,10.5vw,160px); font-weight:500; letter-spacing:-.073em; line-height:.86; margin-bottom:28px; }
  .tagline { font-size:clamp(24px,2.05vw,32px); line-height:1.48; }
  .english { font-size:10px; line-height:1.7; }
  .businesses { left:18%; width:82%; gap:2px; }
  .business { box-shadow:inset 2px 0 1px #ffffffd9, inset 8px 0 16px #d9e5ed20; }
  .agent { flex:1.35; }
  .photo { inset:0 -60px; background:linear-gradient(#c5cdd3, #1d252b 58%, #131a20); }
  .photo img { position:absolute; top:8%; height:68%; object-fit:cover; mask-image:linear-gradient(#000 0%,#000 70%,transparent 100%); }
  .agent .photo { background:linear-gradient(120deg,#edf0f2,#b3bdc4 35%,#222b31 73%); }
  .agent .photo img { object-position:53% center; }
  .event .photo img { object-position:50% center; }
  .dining .photo img { object-position:56% center; }
  .security .photo img { object-position:66% center; }
  .photo:after { background:linear-gradient(180deg,#f5f7f96b 0,transparent 20%,transparent 47%,#07101825 60%,#07101899 100%); }
  .hero-copy:before { content:""; position:absolute; z-index:-1; inset:-45px -65px -35px -110px; background:linear-gradient(90deg,#f4f7f9f2 0,#f4f7f9d9 53%,transparent 98%); filter:blur(18px); }
  .business-label { bottom:11%; left:12%; right:10%; padding:18px 0; }
  .business h2 { font-size:clamp(16px,1.35vw,21px); line-height:1.13; font-weight:500; letter-spacing:-.025em; }
  .business p { font-size:14px; line-height:1.55; }
  .agent .business-label { left:30%; }
  .glass-front { width:118%; height:39%; bottom:-9%; left:-9%; opacity:.8; }
  .glass-edge { width:105%; height:42%; bottom:-13%; right:-12%; opacity:.75; }
  .glass-back { left:-16%; top:-17%; opacity:.78; }
  .scroll-link { bottom:8%; }
}
.business:after { content:""; position:absolute; inset:0; pointer-events:none; border-left:2px solid #ffffffb8; border-right:1px solid #899ba766; box-shadow:inset 7px 0 10px #dbe8f327, inset -3px 0 5px #263c4c22; }
@media (max-width:900px) {
  .businesses { margin-top:25px; gap:13px 12px; }
  .business-label { padding:10px 12px 18px; min-height:96px; }
  .number { font-size:10px; margin-right:0; display:block; color:#c2cdd5; }
  .business h2 { display:block; font-size:11px; line-height:1.23; letter-spacing:.025em; margin:4px 0 0; overflow-wrap:normal; }
  .business p { font-size:13px; margin-top:9px; padding-right:0; }
  .business .arrow { right:12px; bottom:9px; font-size:19px; }
  .photo { height:86px; }
  .business:after { border-left-width:1px; box-shadow:inset 3px 0 5px #e0eaf320; }
  .scroll-link { margin-top:22px; }
}
@media (max-width:360px) {
  :root { --gutter:18px; }
  .header { gap:15px; }
  .business-label { padding:9px 8px 23px 10px; }
  .business h2 { font-size:10px; letter-spacing:0; }
  .business p { font-size:12px; }
  .photo { height:76px; }
  .businesses { gap:12px 10px; }
  .menu { width:calc(100vw - 36px); }
}

.intro-glass{position:absolute;inset:0;width:100%;height:100%;z-index:11;pointer-events:none;overflow:visible}
.intro-glass polygon{fill:#d7e1e917;stroke:#8c9fac;stroke-width:1.3;vector-effect:non-scaling-stroke;transform-origin:0 0;filter:drop-shadow(2px 0 1px #fff)}
@media(min-width:901px){.businesses{left:18%;width:78%}.photo{inset:0 -125px}.photo img{top:0;height:76%;mask-image:linear-gradient(transparent,#000 10%,#000 65%,transparent 100%)}.agent .photo img{object-position:54% center}.business-label{left:10%;right:12%}.agent .business-label{left:29%}}
@media(min-width:901px){.photo img{top:8%;height:54%;mask-image:linear-gradient(transparent,#000 12%,#000 75%,transparent 100%)}}
/* Stage 1 finish: space around the title, clear photographs, edge-led glass. */
@media(min-width:901px){
  .businesses{left:24%;width:72%}
  .agent{flex:1.28}
  .hero-copy{top:25.5%}
  h1{letter-spacing:-.068em;line-height:.88}
  .hero-copy:before{display:none}
  .header{background:linear-gradient(#f7f9fbdf, #f7f9fb55 60%, transparent)}
  .photo img{top:5%;height:61%;mask-image:linear-gradient(#000 0%,#000 78%,transparent 100%)}
  .agent .photo{background:linear-gradient(135deg,#e2e7eb,#27323b 60%,#141c23)}
  .agent .photo img{object-position:46% center}
  .event .photo img{object-position:48% center}
  .dining .photo img{object-position:82% center}
  .security .photo img{object-position:57% center}
  .photo:after{background:linear-gradient(180deg,#f5f7f91a,transparent 20%,transparent 52%,#07101818 65%,#07101877 100%)}
  .business-label{bottom:10.5%}
  .agent .business-label{left:22%}
  .glass-back{opacity:.28}
  .glass-front{opacity:.58;height:32%;bottom:-7%}
  .glass-edge{opacity:.72;height:35%;bottom:-10%}
  .business:after{border-left:1px solid #ffffffc4;border-right:1px solid #8b9ca777;box-shadow:inset 3px 0 3px #e2eef326,inset -2px 0 3px #263c4c22}
}
@media(max-width:900px){
  .business-label{padding-top:11px;padding-bottom:24px;min-height:98px}
  .business h2{line-height:1.28}
  .business p{margin-top:8px}
  .business .arrow{right:12px;bottom:10px;font-size:18px}
}
@media(max-width:360px){
  .business-label{padding:10px 9px 26px 10px}
  .business h2{font-size:10px;letter-spacing:.015em;line-height:1.3}
  .business .arrow{right:11px;bottom:9px}
}
.intro-glass polygon{fill:#d7e1e90c;stroke:#8195a4;stroke-width:1.5;filter:drop-shadow(1px 0 0 #fff)}
@media(min-width:901px){
  .businesses{left:28%;width:68%}
  h1{font-size:clamp(100px,10vw,154px)}
  .agent .photo img{object-position:30% center}
  .security .photo img{object-position:76% center}
  .photo img{top:0;height:66%;mask-image:linear-gradient(#000 0%,#000 80%,transparent 100%)}
}